我正在尝试修复我网站上的滚动性能问题。我有一些带有 background-size: cover
和 background-attachment: fixed
的 div 元素。据我了解,这些非常耗费 gpu。我试图通过将背景图像作为 div 上的单独图层来解决此问题。
我发现这个网站演示了如何做到这一点,但我对他们所做的感到困惑。什么是 @include clearfix;
?如何在我的网站上实现此功能?
https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
我已附上我网站上一个 div 元素的代码,我希望对其进行优化。
此外,这是我网站的 URL(它正在进行中,但您可以看到滚动问题)。
感谢您的参与!
.imagediv1 {
background-size: cover !important;
background-attachment: fixed !important;
max-height: 1500px;
height: 70vh;
background-position: bottom center !important;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
<div class="imagediv1" style="background:url(Images/workstationpic.jpg)"></div>
最佳答案
将 Position 属性更改为 relative 并检查它是否适合您。
.frontCover{position: relative;}
关于html - 使用 div 上的固定背景图像修复滚动性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33509138/