Question

我们正在尝试使用固定的背景图像来覆盖内容的整个视口（例如，内容漂浮在顶部的墙纸）。这是我一直用来完成此操作的代码：

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
</head>
<body>

<div>
</div>

<style>
div {

height: 150vh; 

background: url(https://www.google.com/logos/doodles/2019/spring-equinox-2019-northern-hemisphere-5139135894388736.3-l.png) no-repeat center fixed;
background-size: cover;

}
</style>

</body>
</html>

您也可以在这里查看它：http://neonorb.com/background-test.html

在台式机Chromium和Firefox以及移动Firefox上，此行为均符合我的预期。也就是说，容器为150vh，您可以在背景图像保持静止的状态下进行滚动。

但是，如果您在移动Chrome浏览器中查看图片，则该图片会占据其容器的整个高度（即150vh），并且实际上会滚动并且不固定。

这是移动Chrome中的错误吗？还是这种行为实际上是正确的，并且该错误实际上存在于台式机Chromium和两个Firefox中？还是我做错了什么？

编辑：

对background-size:cover;的行为进行了一些研究……它说cover仅覆盖"background positioning area"。就其本身而言，这很好。

但是，当您同时应用background-attachment:fixed;时，图像将被视为position:fixed;。

那么为什么大多数浏览器似乎都可以像这样覆盖整个视口，而移动Chrome却不能呢？

Answer 1

如果您打算将背景应用于div，而不是body元素本身；确保您的div保持与视口（或您希望背景覆盖的区域）相同的大小：

#div-with-background {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    margin: 0;

    background: url(https://www.google.com/logos/doodles/2019/spring-equinox-2019-northern-hemisphere-5139135894388736.3-l.png) no-repeat center fixed;
    background-size: cover;
}

您还希望删除html和body标签上的边距：

html, body {
    margin: 0;
    padding: 0;
}

提琴：https://jsfiddle.net/ne95d4za/

Answer 2

您将在移动Safari上看到相同的“错误”。实际上，情况甚至更糟，因为Chrome会自动在封面上设置背景大小，而Safari不会。

我认为停用此功能是为了避免触摸屏出现错误，因为固定元素存在问题。

我没有找到不使用视差效果的解决方案，但很高兴知道如何解决该问题。

背景图片封面在移动版Chrome上的行为有所不同

2 个答案: