所以我在一个静态网站上工作,由于某种原因,背景图像使网站滚动速度非常慢;一旦我删除背景图像,它就会加速。
我想在背景上使用 CSS 过滤器模糊效果,但是你不能模糊身体的背景图像,所以这就是我所做的:
的HTML:
<div id="bg">
<img src="img/iphone.jpg" alt="">
</div>
和CSS:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity:0.6;
margin: auto;
min-width: 50%;
min-height: 50%;
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
}
我可以做些什么来获得我想要的背景图像模糊效果但不破坏滚动速度?