Question

我正在使用以下CSS hack

html { 
    background: url(background.jpg) no-repeat center center fixed;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是当使用移动浏览器时，网站的高度并未覆盖整个屏幕显示！该怎么办？

Answer 1

您需要使页面成为屏幕的整个高度/宽度。

html,
body {
  width:100%;
  height:100%;
}

Answer 2

除了指定高度和宽度外，请注意某些移动浏览器不支持“background-attachment：fixed”。查看完整的browser support list（点击底部的“已知问题”标签）。

在移动设备上解决此问题的一种方法（但继续使用其他浏览器的“固定”）是使用媒体查询恢复为“background-attachment：scroll”移动宽度。例如：

如果你的原始CSS是

#some-div
{
     background: url("background.jpg") no-repeat center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}

然后您的媒体查询可能如下所示：

@media (min-width : 320px) and (max-width : 767px) 
{
    #some-div {
        background-attachment: scroll;
    }
}

当然，如果您首先不需要“background-attachment：fixed”，那么只需从第一行删除“fixed”就可以了。

如何在移动浏览器中制作固定背景以覆盖整个屏幕？

2 个答案: