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），因此它应该符合SafariWeb内容指南的规则。这是什么问题？

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;
}