CSS iPad 和 iPhone 上未显示背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18999660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image not showing on iPad and iPhone
提问by Jorge Con Jota
I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:
我想在移动网页中创建一个带有背景的部分，因此我使用了以下 CSS 代码：
#section1{
background: url("background1.png") auto 749px;
height: 749px;
}
The background is showing correctly on Android (Chrome, Firefox ...), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS ...). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guiderules. Which is the problem?
背景在 Android（Chrome、Firefox ...）上正确显示，但在 iPhone 或 iPad（Safari、Chrome iOS ...）上根本不显示。当 DOM 准备好时，我尝试使用 jQuery 设置这些属性，但没有运气。我读到大小可能有问题，但图像大约为 700kB (1124x749px)，因此它应该满足Safari Web 内容指南规则。哪个是问题？
采纳答案by insertusernamehere
There's a problem with your CSS rule:
你的 CSS 规则有问题：
Your using the shorthand notation in which the background-size-property comes afterthe background-position-property and it must be separated by a /.
您使用速记符号，其中background-size-property 出现在background-position-property之后，并且必须以 . 分隔/。
What you're trying to do is to set the position, but it will fail as autois not a valid value for it.
您要做的是设置位置，但它会失败，因为auto它不是一个有效值。
To get it to work in shorthand notation it has to look like this:
要使其以速记符号工作，它必须如下所示：
background: url([URL]) 0 0 / auto 749px;
Also note that there's a value called cover, which may be suitable and more flexible here:
另请注意，有一个名为 的值cover，在这里可能更合适且更灵活：
background: url([URL]) 0 0 / cover;
The supportfor background-sizein the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:
的支持对于background-size在速记符号也不算很广，因为它在Firefox 18 +，Chrome浏览器21+，IE9 +和Opera的支持。Safari 根本不支持它。关于这一点，我建议始终使用：
background: url("background1.png");
background-size: auto 749px; /* or cover */
Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.
下面是一些示例和演示，以演示该行为。例如，您会看到 Firefox 显示除第一个图像之外的所有图像。另一方面，Safari 只显示最后一个。
CSS
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;
}
Demo
演示
Further reading
进一步阅读
MDN CSS reference "background"
MDN CSS reference "background-size"
MDN CSS 参考“背景”
MDN CSS 参考“背景大小”
<'background-size'>
See background-size. This property must be specified after background-position, separated with the '/' character.
<'background-size'>
参见background-size。此属性必须在 background-position 之后指定，以“/”字符分隔。
回答by yndolok
My problem was that iOS doesn't support background-attachment: fixed. Removing that line made the image appear.
我的问题是 iOS 不支持background-attachment: fixed. 删除该行使图像出现。
It looks like there are workarounds for a fixed background image though: How to replicate background-attachment fixed on iOS
不过，似乎有固定背景图像的解决方法：如何复制固定在 iOS 上的背景附件
回答by Alexandre Bourlier
I hope this will help someone in despair. In my case, it was the size of the image that was too big, so the iPad just wasn't loading it (and it was right actually).
我希望这能帮助绝望的人。就我而言，是图像尺寸太大，所以 iPad 没有加载它（实际上是正确的）。
Diminishing its size and quality solved the loading issue.
减小其尺寸和质量解决了加载问题。
回答by Jorge Con Jota
The problem was not solved when I tried to use properly the background in shorthand. It works when I split the background property:
当我尝试正确使用速记背景时，问题没有解决。当我拆分背景属性时它起作用：
#section1{
background: url("background1.png");
background-size: auto 749px;
height: 749px;
}
回答by L X
Reduce the image size if nothing else works -- iOS doesn't like large image sizes on mobile and simply won't display the image if it's too large.
如果没有其他效果，请减小图像大小——iOS 不喜欢移动设备上的大图像尺寸，如果图像太大，则不会显示图像。
Great fundamentals by @insertusernamehere! No matter what I did I couldn't get my image to show up...until, I went back to basics. The image size was too large and iPhone didn't like loading an image of that size, over 700kbs. So, I reduced it to 32kb and we were in action.
@insertusernamehere 的伟大基础知识！无论我做什么，我都无法让我的形象出现……直到，我回到了基础。图像尺寸太大，iPhone 不喜欢加载超过 700kbs 的这种尺寸的图像。所以，我把它减少到 32kb，我们开始行动了。
回答by Rizwan Akram
Background image disappears on the IOS Browser (iPhone/iPad). This is the code i used:
背景图像在 IOS 浏览器 (iPhone/iPad) 上消失。这是我使用的代码：
/*CSS*/
.bg-image {
background: url([URL]) center/cover no-repeat;
}
回答by Arpita
Alternatively, img src works on all browsers. It adds the Background Images acc to devices resolution.
或者， 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>
This piece of code is tested on iPhone Safari, Android Chrome and web Safari. Hopefully, This will help.
这段代码在 iPhone Safari、Android Chrome 和 web Safari 上进行了测试。希望这会有所帮助。
回答by chovy
I had to set input { opacity: 0; }for my input + span {}icon to show up.
我必须设置input { opacity: 0; }我的input + span {}图标才能显示。
回答by Chris D. Emerson
I don't have a real solution/reason for my similar issue but my background-image PNG image simply wouldn't show up until I moved it to a new folder in my (Cordova) iPad app. I literally moved it from /css/images/sweden/myimage.png to /css/images/sv/myimage.png and it started working. The other odd thing is that ALL other images in the original folder work fine (as background-image). Super strange. If I find the true reason/fix I'll report back.
对于我的类似问题，我没有真正的解决方案/原因，但我的背景图像 PNG 图像在我将其移动到我的（Cordova）iPad 应用程序中的新文件夹之前根本不会显示。我真的把它从 /css/images/sweden/myimage.png 移动到 /css/images/sv/myimage.png 并且它开始工作了。另一个奇怪的事情是原始文件夹中的所有其他图像都可以正常工作（作为背景图像）。超级奇怪。如果我找到真正的原因/解决方法，我会回来报告。
回答by dam1
Add a background-color solved my problem
添加背景色解决了我的问题
background-color: #F4F4F2;
