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规则。问题出在哪？

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

<强>演示

Try before buy

进一步阅读

MDN CSS reference "background"
MDN CSS reference "background-size"

<强>＆LT; '背景尺寸' ＆GT;
见background-size。必须在background-position之后指定此属性，并以“/”字符分隔。

Answer 2

我的问题是iOS不支持background-attachment: fixed。删除该行会使图像显示。

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

Answer 3

我希望这能帮助绝望的人。在我的情况下，图像的大小太大，所以iPad只是没有加载它（实际上是正确的）。

减小尺寸和质量解决了装载问题。

Answer 4

当我试图以速记方式正确使用背景时问题没有解决。当我拆分背景属性时它可以工作：

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

Answer 5

如果其他方法无效，则缩小图像尺寸 - iOS不喜欢手机上的大图像尺寸，如果图像太大，则无法显示图像。

@insertusernamehere的基本面很棒！无论我做了什么，我都无法让我的形象出现......直到，我回到了基础。图像尺寸太大，iPhone不喜欢加载超过700kbs的图像。所以，我把它减少到了32kb，然后我们就开始了。

Answer 6

背景图像在IOS浏览器（iPhone / iPad）上消失了。这是我使用的代码：

/*CSS*/
.bg-image {
    background: url([URL]) center/cover no-repeat;
}

Answer 7

我有一个负面的文字缩进，它将我的背景图像从页面上抛出，所以颜色：透明它就是。

Answer 8

我没有看到有人这么说，但你也必须定义宽度。因此，因为我将背景大小设置为“包含” - 它必须知道容器的尺寸是什么。

一旦我做了，背景就像预期一样呈现。

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

注意：需要为两个断点定义后台URL，以便它适用于iPhone 5（iOS7）。

Answer 9

添加背景颜色解决了我的问题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<body>
  <div>scroll to here</div>
</body>

Answer 10

或者，img src在所有浏览器上均可使用。它将Background Images acc添加到设备分辨率。

<div class="download">
  <picture>
    <source srcset="/images/ios-device-mobile-v2.png" media="(max-width:450px)"/>
     <source srcset="/images/ios-device-mobile-v2.png" media="(min-width: 600px)"/>
    <img src="/images/ios-device.png" class="imgright">
  </picture>
</div>

这段代码已在iPhone Safari，Android Chrome和Web Safari上进行了测试。希望这会有所帮助。

Answer 11

我必须为input { opacity: 0; }图标设置input + span {}才能显示。

Answer 12

对于类似的问题，我没有真正的解决方案/理由，但是直到将背景图像PNG图像移动到我的（科尔多瓦）iPad应用程序中的新文件夹后，它才会显示。我从字面上将其从/css/images/sweden/myimage.png移到了/css/images/sv/myimage.png，它开始起作用。另一个奇怪的是，原始文件夹中的所有其他图像都可以正常工作（作为背景图像）。超级奇怪。如果我找到真正的原因/解决方法，我会报告。

没有在iPad和iPhone上显示的背景图像

12 个答案: