修复固定的背景图像上的滚动性能div

Question

我正试图解决我的网站上的滚动性能问题。我有几个div元素background-size: cover和background-attachment: fixed。据我所知这些都是非常密集的GPU。我试图通过使背景图像在div上的单独图层来解决问题。

我发现这个网站，演示如何做到这一点，但我很困惑他们做了什么。什么是@include clearfix;？我如何在我的网站上执行此操作？

https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

我重视我的网站上，我希望优化从一个div元素的代码。

另外，这里是我的网站的网址（它的工作正在进行中，但你可以看到如何滚动的问题）。

http://petermankiewich.com/

谢谢您的意见！

.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>

Answer 1

改变位置属性相对并检查它是否适合你。

.frontCover{position: relative;}