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

时间:2015-11-03 21:10:59

标签: html css performance scroll background

我正在尝试修复我网站上的滚动性能问题。我有一些background-size: coverbackground-attachment: fixed的div元素。据我所知,这些都是非常密集的。我试图通过使背景图像成为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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-2)

将Position属性更改为relative,并检查它是否适合您。

.frontCover{position: relative;}