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

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

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

看起来有固定背景图像的解决方法:如何复制在iOS上修复的背景附件

Answer 2

您的CSS规则存在问题:

您使用速记符号,其中background-size-property来后的background-position-property和它必须由分开/.

你要做的是设置位置,但它会失败,因为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;
}

演示

买前先试试

进一步阅读

MDN CSS参考"背景"
MDN CSS参考"background-size"

<'background-size'>
请参阅background-size.必须在background-position之后指定此属性,并以"/"字符分隔.

Answer 3

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

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

Answer 4

当我试图在速记中正确使用背景时问题没有解决.当我拆分背景属性时它可以工作:

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