修復固定的背景圖像上的滾動性能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;}