performance - 是否有 "background-size:cover"的替代方案来加快加载速度？

Question

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

是否有替代“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 样式。

Answer 1

要修复 webkit 上的低性能，你应该使用这个:

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

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