与格固定的背景图像定影性能滚动 [英] Fixing scrolling performance with fixed background image on div
问题描述
我试图解决我的网站上滚动preformance问题。我有一个几个div元素的背景大小:覆盖
和背景附件:固定
。据我所知,这些都是pretty GPU密集。我试图通过使背景图像的DIV一个单独的层来解决这个问题。
我发现这个网站发现证明是如何做到这一点,但我对自己所做的事感到困惑。什么是 @include clearfix;
?我怎么能在我的网站实现这个?
的https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
我从我的网站上div元素,我希望优化附code。
此外,这里是url到我的网站(其进展中的工作,但你可以看到有滚动的问题)。
感谢您的输入!
.imagediv1 {\r
背景大小:覆盖重要的;!\r
背景附件:固定重要;!\r
最大高度:1500px;\r
高度:70vh;\r
背景位置:底部中心重要;!\r
-moz-箱阴影:插图0 0 10px的#000000;\r
-webkit-箱阴影:插图0 0 10px的#000000;\r
箱阴影:插图0 0 10px的#000000;\r
}
\r
< DIV CLASS =imagediv1的风格=背景:网址(图像/ workstationpic.jpg)>< / DIV>
\r
的位置属性更改为相对的,检查它是否适合你。
.frontCover {位置:相对;}
I am trying to fix scrolling preformance problems on my site. I have a few div elements with background-size: cover
and background-attachment: fixed
. As I understand these are pretty gpu intensive. I am trying to fix the problem by making the background images a separate layer on the div.
I found this site that demonstates how to do this, but I am confused by what they have done. What is @include clearfix;
? How can I implement this on my site?
https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property
I have attached the code from a div element on my site which I hope to optimize.
Also, here is the url to my site (its a work in progress but you can see how there is scrolling issues).
Thank you for your input!
.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>
Change the Position property to relative and check if it works for you.
.frontCover{position: relative;}
这篇关于与格固定的背景图像定影性能滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!