Question

我使用Chrome及以下版本是我的背景图片的代码。这有效地使我选择的背景图像覆盖了我的其他元素后面的整个屏幕，并将其设置为灰度。它工作得很好，但我已经确定了背景大小：封面正在大大降低加载速度和网站的可用性。

是否有替代＆＃34;背景大小：封面＆＃34; （见第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);

使用背景封面应用于元素。

是否有“background-size：cover”的替代方案可以加快加载速度？

1 个答案: