背景图片不显示在iPad和iPhone [英] Background image not showing on iPad and iPhone

问题描述

我想创建一个覆盖在一个移动网页背景的部分，所以我用下面的CSS code：

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

背景是正确显示在Android（浏览器，火狐...），但它没有显示在iPhone或iPad（Safari浏览器，Chrome浏览器的iOS ......）都没有。我曾尝试使用jQuery当DOM准备设置这些属性，但没有运气。我读的大小可能是一个问题，但图像约700KB（1124x749px），所以它应该完成的Safari Web内容指南规则。这是什么问题？

推荐答案

有与你的CSS规则的问题：

There's a problem with your CSS rule:

您使用速记符号，其中背景大小 -property自带的之后的的背景位置 - 属性和必须由被分隔 / 的

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;

在支持为背景大小的速记符号也不是很广泛的，因为它在Firefox 18 +，Chrome的支持21+ ，IE9 +和Opera。它不是在Safari浏览器支持在所有。对此，我建议总是使用：

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 */

下面是几个例子和演示，以证明该行为。你会看到，Firefox浏览器的例子显示，除了拳头每隔一个图像。 Safari浏览器，另一方面只显示最后一个。

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

演示

试用购买前

进一步阅读

​​ MDN CSS参考背景结果
MDN CSS参考背景的网站

＆LT;'背景大小'> 结果
  请参见背景大小。
  此属性必须经过背景位置指定，用/字符分隔。

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

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