在 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 网页内容指南 规则.问题出在哪里?
你的 CSS 规则有问题:
您使用 background-size
-property 位于 background-position
-property 和 it 之后的简写符号必须用 /
分隔.
你要做的是设置位置,但它会失败,因为 auto
不是它的有效值.
要使其以速记表示法工作,它必须如下所示:
背景:url([URL]) 0 0/auto 749px;
另外请注意,有一个名为 cover
的值,在这里可能更合适且更灵活:
背景:url([URL]) 0 0/封面;
background-size
的 support 也不是很广泛,因为它在 Firefox 18+、Chrome 21+、IE9+ 和 Opera 中受支持.Safari 根本不支持它.关于这一点,我建议始终使用:
background: url("background1.png");背景尺寸:自动 749 像素;/* 或覆盖 */
以下是一些示例和演示,用于演示该行为.例如,您会看到 Firefox 显示除第一个图像之外的所有图像.另一方面,Safari 只显示最后一个.
CSS
部分{宽度:200px;高度:100px;边框:1px 纯灰色;}#section1 {背景:网址(http://placehold.it/350x150)自动100px;}#section2 {背景:网址(http://placehold.it/350x150)0 0/自动100px;}#section3 {背景:网址(http://placehold.it/350x150)0 0/封面;}#section4 {背景:网址(http://placehold.it/350x150)0 0;背景尺寸:封面;}
演示
进一步阅读
MDN CSS 参考背景"
MDN CSS 参考 "background-size"p><块引用>
<'背景尺寸'>
请参阅 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
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屋!