0

我正在使用 Chrome，下面是我的背景图片的代码。这有效地使我选择的背景图像覆盖了其他元素后面的整个屏幕，并将其设置为灰度。它工作得很好，但是我发现 background-size:cover 正在显着降低网站的加载速度和可用性。

是否有替代“背景尺寸：封面”（参见第 1 行）的替代方法，可以在视觉上呈现相同的结果但提高网站的加载速度？谢谢！

<div style='background: url("LARGE PHOTO URL HERE") no-repeat center center fixed;background-size: cover;' class="grayscale bg"></div>

<div id="background">

    <style>

        #supersized img{

            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

            filter: gray; /* IE6-9 */

            -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

        }

    </style>

</div>

不确定这些是否相关，因为它们是 ID 而不是类......所以我可能已经添加了它们但没有使用它们，但我的样式表中还有一些可能相关的样式：

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:200%; 
    height:200%;
    z-index: -1;
    display: none;
}

#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

似乎没有#background 样式。

4

1 回答 1

0

要修复 webkit 的低性能，您应该使用以下命令：

-webkit-transform: translate3d(0,0,0);

应用于带有背景覆盖的元素。

于 2014-03-08T09:13:05.213 回答