iPad 和 iPhone 上未显示背景图像 [英] Background image not showing on iPad and iPhone

问题描述

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

#section1{背景: url("background1.png") 自动 749px;高度:749px；}

背景在 Android(Chrome、Firefox ...)上正确显示，但在 iPhone 或 iPad(Safari、Chrome iOS ...)上根本不显示.当 DOM 准备就绪时，我尝试使用 jQuery 设置这些属性，但没有成功.我读到大小可能有问题，但图像大约 700kB (1124x749px) 所以它应该完成 Safari Web 内容指南 规则.问题出在哪里?

解决方案

你的 CSS 规则有问题:

您使用的速记符号是 background-size-property after background-position-property 和 it必须用 / 分隔.

您尝试做的是设置位置，但它会失败，因为 auto 不是它的有效值.

要使其以速记符号工作，它必须如下所示:

背景:url([URL]) 0 0/auto 749px;

另请注意，有一个名为 cover 的值，这里可能更适合且更灵活:

背景:url([URL]) 0 0/封面；

background-size 在速记符号中的支持 也不是很广泛，因为它在 Firefox 18+、Chrome 21+、IE9+ 和 Opera 中受支持.Safari 根本不支持它.关于这一点，我建议始终使用:

background: url("background1.png");背景尺寸:自动 749 像素；/* 或覆盖 */

以下是一些示例和演示，用于演示该行为.例如，您会看到 Firefox 显示除第一个图像之外的所有图像.另一方面，Safari 只显示最后一个.

CSS

section {宽度:200px；高度:100px；边框:1px 纯灰色；}#section1 {背景: url(http://placehold.it/350x150) auto 100px;}#section2 {背景: url(http://placehold.it/350x150) 0 0/auto 100px;}#section3 {背景: url(http://placehold.it/350x150) 0 0/封面；}#section4 {背景:网址(http://placehold.it/350x150)0 0；背景尺寸:封面；}

演示

先试后买

进一步阅读

MDN CSS 参考背景"
MDN CSS 参考background-size"><块引用>

<'背景尺寸'>
请参阅背景尺寸.此属性必须在 background-position 之后指定，以/"字符分隔.

I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:

#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 Guide rules. Which is the problem?

解决方案

There's a problem with your CSS rule:

Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.

What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.

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:

background: url([URL]) 0 0 / cover;

The support for background-size in 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: 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.

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

Try before buy

Further reading

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

<'background-size'>
See background-size. This property must be specified after background-position, separated with the '/' character.

这篇关于iPad 和 iPhone 上未显示背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！