Question

特别是在使用Chrome时，它会产生明显的滚动延迟，并且还会影响页面上的动画，并使它们口吃得非常糟糕。

那么背景大小是否有替代方法：封面？我尝试了一些东西，包括插件jQuery backstretch，但它实际上创建了与background-size一样多的延迟：cover。

Answer 1

我一直在寻找这个，我终于弄明白了。然而，它只是移动解决方案。（对不起恢复旧帖子）：

/* portrait */
@media screen and (orientation:portrait) {
    .box{
    /* portrait-specific styles */
    background-size: auto 100%;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
   .box{
    /* landscape-specific styles */
    background-size: 100% auto;
    }
}

（这是针对比它们长的图像而写的。要切换它，请翻转100%和auto。）它有两个部分。第一部分涉及@media screen and (orientation:landscape或portait)。这会根据不同的屏幕方向显示不同的图像。第二部分更有趣：100% width或length根据宽度或长度填充图像，自动确保图像正确缩放。因此，如果您的图像长于宽图像，则在纵向模式下它会填充较长的一侧，从而具有遮盖效果（反之亦然）。

Answer 2

试试吧，

   background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   -webkit-background-size:cover;

或者您可以尝试使用javascript，

function actualizar_fondo(imagen){
    $('body').css({"background":"url(img/"+imagen+".jpg) no-repeat center center fixed"});
    $('body').css({"-webkit-background-size":"cover"});
    $('body').css({"-moz-background-size":"cover"});
    $('body').css({"-o-background-size":"cover"});
    $('body').css({"background-size":"cover"});
                                 }

或者你可以去this link，因为法尔古尼说。 Here是文档！

是否有背景大小的替代品：封面？

2 个答案: