Question

	.bgimg-1 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('https://sftextures.com/texture/6519/0/6520/black-dots-dark-HD-background-metal-material-holes-corner-sided-light-shades-seamless-texture-256x256.jpg');
  min-height: 100%;
}

.bgimg-1 ul li {
	color:white;
}

<section class="bgimg-1" >
<ul>
<li> Some text </li>
<li> Some text </li>
<li> Some text </li>
</ul>

我实现了一个非常简单的纯CSS视差效果。它看起来只是我想要的方式，但是唯一的问题是帧速率（跨平台）在使用时会崩溃。当浏览器滚动到视差效果时，帧速率恢复正常。

网上有很多关于如何提高视差帧率的文章，但是几乎所有文章都与javascript实现有关，或者如果仅使用CSS，则与transition属性有关。

查看网页时，如何提高浏览器性能？

CSS视差帧率低：

0 个答案: