Question

所以我有一个全屏幕背景设置如下：

#div {
    background-image: url("images/slide1.jpg");
    background-position: center 20%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

背景图片根据所有视口大小调整大小，但是当我从手机查看网站时，它似乎显示整个图片的一小部分 - 基本上background-size: cover;规则并不是这样。似乎工作。还应该注意的是，如果我在我的电脑手机尺寸上制作窗口，背景会正确调整大小。当我使用响应式显示工具“响应式测试网络”查看它时，它也会正确调整大小。当我真的在手机上打开它时，就不行了。

一如既往，非常感谢任何建议。

Answer 1

我正在为正在开发的投资组合网站做类似的事情，它在移动设备上运行良好。这是我的CSS工作代码：

    display: table;
width: 100%;
height: auto;
padding: 100px 0;
background: url(../img/bbg1.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;

因此，您可以看到一些可以尝试更改的内容，例如显示高度。

在mobile device

上测试此网站

background-size：封面不响应

1 个答案: