在 iPad 和 iPhone 上不显示背景图像

Question

我想在移动网页中创建一个背景覆盖它的部分，所以我使用了以下 CSS 代码：

 #section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

背景在 Android（Chrome、Firefox …）上正确显示，但在 iPhone 或 iPad（Safari、Chrome iOS …）上根本不显示。当 DOM 准备好时，我尝试使用 jQuery 设置这些属性，但没有运气。我读到大小可能是个问题，但图像大约是 700kB (1124x749px)，所以它应该符合 Safari Web Content Guide 规则。哪个是问题？

原文由 Jorge Con Jota 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 CSS 规则有问题：

您使用速记符号，其中 background-size 属性位于 background-position 属性 _之后_，并且 _必须由 / 分隔_。

您要做的是设置位置，但它会失败，因为 auto 不是它的有效值。

为了让它以速记符号工作，它必须如下所示：

 background: url([URL]) 0 0 / auto 749px;

另请注意，有一个名为 cover 的值，在这里可能更合适且更灵活：

 background: url([URL]) 0 0 / cover;

对 background-size 的 支持 也不是很广泛，因为它在 Firefox 18+、Chrome 21+、IE9+ 和 Opera 中得到支持。 Safari 根本不支持它。关于这一点，我建议始终使用：

 background: url("background1.png");
background-size: auto 749px; /* or cover */

以下是一些示例和演示，以演示该行为。例如，您会看到 Firefox 显示除第一个图像之外的所有图像。另一方面，Safari 只显示最后一个。

CSS

 section {
    width: 200px;
    height: 100px;
    border: 1px solid grey;
}

#section1 {
    background: url(http://placehold.it/350x150) auto 100px;
}

#section2 {
    background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}

#section3 {
    background: url(http://placehold.it/350x150) 0 0 / cover;
}

#section4 {
    background: url(http://placehold.it/350x150) 0 0;
    background-size: cover;
}

演示

先试后买

进一步阅读

MDN CSS 参考“背景”

MDN CSS 参考“背景尺寸”

<‘背景尺寸’>

请参阅 背景大小。此属性必须在 background-position 之后指定，用“/”字符分隔。

原文由 insertusernamehere 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我的问题是 iOS 不支持 background-attachment: fixed 。删除那条线使图像出现。

看起来有固定背景图像的解决方法： How to replicate background-attachment fixed on iOS

原文由 yndolok 发布，翻译遵循 CC BY-SA 3.0 许可协议