我想在移动网页中创建一个背景覆盖它的部分，因此我使用了以下 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 规则。问题出在哪里？
【问题讨论】：
标签： iphone ios css ipad background
我尝试调整背景图像的大小，结果太小而无法测试理论，但它仍然无法在 iPad（可能是 iPhone）上的任何浏览器上显示。尝试了此处列出的其他解决方案 - 仍然不行。然后我注意到该元素继承了display: table;。添加了display: block; 来覆盖它，并且背景图像现在显示在我测试过的所有设备上。
【讨论】：
对于我的类似问题，我没有真正的解决方案/原因，但我的背景图像 PNG 图像根本不会显示，直到我将它移到我 (Cordova) iPad 应用程序中的新文件夹中。我从字面上将它从 /css/images/sweden/myimage.png 移动到 /css/images/sv/myimage.png 并开始工作。另一个奇怪的事情是原始文件夹中的所有其他图像都可以正常工作（作为背景图像）。超级奇怪。如果我找到真正的原因/解决方法，我会报告。
【讨论】：
我必须设置input { opacity: 0; } 才能显示我的input + span {} 图标。
【讨论】：
另外，img src 适用于所有浏览器。它根据设备分辨率添加背景图像。
<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 上进行了测试。希望这会有所帮助。
【讨论】：
背景图像在 IOS 浏览器 (iPhone/iPad) 上消失。 这是我使用的代码：
/*CSS*/
.bg-image {
background: url([URL]) center/cover no-repeat;
}
【讨论】：
你的 CSS 规则有问题：
您使用的background-size-property 位于background-position-property 之后的简写符号，并且它必须用/ 分隔。
你想要做的是设置位置，但它会失败，因为auto 不是它的有效值。
要让它以速记符号工作，它必须如下所示：
background: url([URL]) 0 0 / auto 749px;
另请注意，有一个名为cover 的值，在这里可能更合适且更灵活：
background: url([URL]) 0 0 / cover;
background-size 的 support 简写符号也不是很广泛，因为它在 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 reference "background"
MDN CSS reference "background-size"
见background-size。 此属性必须在 background-position 之后指定，以 '/' 字符分隔。
【讨论】：
添加背景色解决了我的问题
background-color: #F4F4F2;
【讨论】：
如果没有其他方法，请减小图像大小 - iOS 不喜欢移动设备上的大图像尺寸，如果图像太大，则根本不会显示图像。
@insertusernamehere 的基础知识很棒！无论我做什么，我都无法让我的形象出现……直到，我回到了基础。图片尺寸太大，iPhone 不喜欢加载超过 700kbs 的图片。所以，我把它减少到 32kb，然后我们就开始行动了。
【讨论】：
我的问题是 iOS 不支持background-attachment: fixed。删除那条线会显示图像。
看起来有固定背景图像的解决方法：How to replicate background-attachment fixed on iOS
【讨论】：
我没有看到有人特别说这个，但你也必须定义宽度。因为我将背景大小设置为“包含” - 它必须知道容器的尺寸是多少。
完成后，背景按预期呈现。
@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)。
【讨论】：
我有一个负面的文本缩进，它把我的背景图片从页面上扔了出去，所以 color:Transparent 就是这样。
【讨论】：
我希望这能帮助绝望的人。 在我的情况下，图像的尺寸太大了，所以 iPad 没有加载它（实际上它是正确的）。
减小其大小和质量解决了加载问题。
【讨论】：
当我尝试正确使用速记背景时，问题没有解决。当我拆分背景属性时它可以工作：
#section1{
background: url("background1.png");
background-size: auto 749px;
height: 749px;
}
【讨论】：