背景尺寸：封面在 iOS 上不起作用答案

【问题标题】：background-size: cover not working on iOS背景尺寸：封面在 iOS 上不起作用
【发布时间】：2014-08-01 00:33:24
【问题描述】：

这是我的代码：

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 上，背景太大：

【问题讨论】：

<div class="backdrop"></div> 解决方案由 Ryan 和 Roko 的回答为我工作。但是，我没有在 CSS 块中添加 position: absolute，而是在下面添加了这一行并且效果很好：> min-height: 100vh;

标签： ios css background-image

【解决方案1】：

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

作为@RyanKimber pointed out，固定附加图像使用整个<body> 大小。在移动设备上，这可能会变得非常高，这会让你的形象大吃一惊。将附件设置回scroll 可以让您的封面图片在其自己的容器中拉伸。

【讨论】：

设置最大宽度时不要忘记考虑移动设备是横向的，否则横向时不会触发媒体查询，你会遇到同样的问题。
如果您想要一个没有@media 查询的解决方案，那么请在下面使用一个简单的正文查看我的答案：在 CSS 规则之后，并且没有额外的 html 节点：stackoverflow.com/a/43058483/7765675
对我来说几乎是完美的答案，因为我不介意在必要时切换到background-attachment: scroll。我刚刚调整了媒体查询以仅针对 IOS 移动设备。 @supports (-webkit-overflow-scrolling: touch) { body *: { background-attachment: scroll; } }我发现了这个技巧on another stackoverflow post

【解决方案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”，但我不想弄乱 body 的定位和我的整体布局。

所以在 body:after 上执行此操作非常简单。我已经在 Mac 和 iOS 上使用 firefox、safari、chrome 测试了该解决方案。

我还为此创建了一个 github 存储库，其中包含 2 个示例：https://github.com/thesved/fixed-cover-background

【讨论】：

看来 body:after{...} 解决方案完美运行。我刚刚在浏览器堆栈上进行了测试。很好的解决方案！
在尝试了许多其他假设的解决方案之后，这个解决方案在桌面和移动设备上都能完美运行！谢谢维克多！
一定要添加 background-attachment:scroll 用于讨厌的 iphone 背景放大
您的 github 存储库中的示例似乎不适用于在横向使用 iPad Pro 的 iOS12 模拟器。
GitHub 存储库运行良好...在 2020 SE+ 手机上进行了测试。

【解决方案3】：

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

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

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

【讨论】：

谢谢！在将我的头撞到墙上一个小时后，我偶然发现了这个，为什么 IOS / Safari 背景图像是一团模糊的混乱。

【解决方案4】：

这也给我带来了许多问题。问题是 iOS 使用 body 的完整高度和宽度而不是视口来决定大小。

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

我们将背景应用到这个 div 并给它 position: absolute;顶部：0；底部：0；左：0；正确：0。

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

【讨论】：

这些值实际上创建了一个整个身体大小的元素，而不是视口，它重现了原始问题

【解决方案5】：

将 background-attatchment 从 fixed 更改为 scroll。

.yourClass {
    background-attachment: scroll;
}

【讨论】：

【解决方案6】：

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

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

所以我们可以通过将背景大小设置为 100% 的宽度或高度来克服这个限制，具体取决于方向。我们可以定位当前方向（以及 iOS 设备，使用 device-width）。有了这两点，我认为您可以在 iOS 上以纵向模式使用 CSS background-size:cover

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

【讨论】：

【解决方案7】：

试试这个：

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

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

不是真正的覆盖，用平方图像做这项工作:)

【讨论】：