Question

这是我的代码：

background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;

它在台式机，iPad和Android手机上工作：

在iPhone上的Chrome和Safari上，背景太大了：

Answer 1

当你background-attachment:fixed时会发生这种情况。在移动设备上，我通常将background-attachment:scroll放在@media查询中。

作为@RyanKimber pointed out，固定附加图片使用整个<body>尺寸。在移动设备上，这可能会变得非常高，从而将您的图像吹走。将附件设置回scroll可使封面图像在自己的容器内拉伸。

Answer 2

详细阐述Ryan的答案，不添加任何新的html节点或使用@media个查询，仅使用一个css 。

如果你想在包括iOS在内的所有设备上保留cover大小fixed背景，而不添加新节点，那么诀窍就是对元素进行固定定位（身体）本身，而不是背景，因为固定的背景和封面大小会搞砸iOS。

它也像iOS上的魅力一样在制作中使用：https://www.doklist.com/

此代码不起作用，因为iOS使用的是document的高度，而不是viewport：

body {
      background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

现在这是神奇的，body:after已修复，不是背景：

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

我可以使用 body 本身，“position：fixed; overflow-y：scroll”，但我不想弄乱身体的位置和整体布局。

所以在正文中执行此操作：之后是一个非常简单的修复。我已经在Mac上测试了解决方案，并使用firefox，safari，chrome测试了iOS。

我还创建了一个包含2个示例的github repo：https://github.com/thesved/fixed-cover-background

Answer 3

这也给我带来了很多问题。问题是iOS正在使用全高度＆amp;身体的宽度而不是视口来决定大小。

我们的解决方案是创建一个新的<div class="backdrop"></div>。

我们将背景应用于此div并给它定位：绝对;顶部：0;底部：0;左：0;右：0。

由于此div现在是视口的大小，background-size: cover可以正常工作。

Answer 4

这里有一个简单的解决方法，使Safari浏览器中的图片可以正常显示（仅在Safari浏览器中滚动而不是在其他媒体中固定）

@supports ( -webkit-touch-callout : none) {
.selector {
background-attachment:scroll
}
}

@supports not ( -webkit-touch-callout : none) {
.selector {
background-attachment: fixed;
}
}

Answer 5

这篇文章回答了你的问题：why does CSS background-size: cover not work in portrait mode on iOS?

并非所有浏览器都会识别封面关键字的背景大小，因此，只需忽略它。

因此，我们可以通过将背景大小设置为100％宽度或高度来克服该限制，具体取决于方向。我们可以定位当前方向（以及iOS设备，使用设备宽度）。有了这两点，我认为你可以使用CSS background-size：在iOS上以纵向模式覆盖

查看该帖子以获取更多资源。

Answer 6

将背景匹配从固定更改为滚动。

.yourClass {
    background-attachment: scroll;
}

Answer 7

试试这个：

background: url( /gfx/background.jpg  ) no-repeat top center fixed; 
background-size: 100vmax 100vmax;

如前所述，＆＃34;封面＆＃34;将覆盖文档高度，而不是视图高度。大多数单位将无法按预期工作，因此vmax。

没有真正覆盖，用平方图像完成工作：）

background-size：封面不适用于iOS

7 个答案: