iPad和iPhone上没有显示背景图片

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

背景在Android（Chrome，Firefox …）上可以正确显示，但在iPhone或iPad（Safari，Chrome iOS

…）上则完全不显示。我已经尝试在DOM准备就绪时使用jQuery设置这些属性，但是没有运气。我读到大小可能是个问题，但是图像约为700kB（1124x749px），因此它应该符合SafariWeb内容指南的规则。这是什么问题？

回答：

您的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仅显示最后一个。

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

以上是 iPad和iPhone上没有显示背景图片 的全部内容， 来源链接： utcz.com/qa/418494.html

回到顶部