13

我想在移动网页中创建一个背景覆盖它的部分，所以我使用了以下 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规则。哪个是问题？

4

13 回答 13

17

我的问题是 iOS 不支持background-attachment: fixed. 删除该行使图像出现。

看起来固定背景图像有一些解决方法：How to replicate background-attachment fixed on iOS

于 2015-07-01T20:48:25.037 回答
12

您的 CSS 规则有问题：

您使用简写符号，其中 -property 位于background-size-property之后，background-position并且必须用 分隔/。

你想要做的是设置位置，但它会失败，因为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-position 之后指定，用“/”字符分隔。

于 2013-09-25T09:08:04.760 回答
7

我希望这能帮助绝望的人。在我的情况下，图像的尺寸太大了，所以 iPad 没有加载它（实际上它是正确的）。

减小其尺寸和质量解决了加载问题。

于 2014-07-15T19:27:13.543 回答
6

当我尝试正确使用速记背景时，问题没有解决。它在我拆分背景属性时起作用：

#section1{
    background: url("background1.png");
    background-size: auto 749px;
    height: 749px;
}
于 2013-09-25T08:16:31.263 回答
2

如果没有其他方法，请减小图像尺寸——iOS 不喜欢移动设备上的大图像尺寸，如果图像太大，则根本不会显示图像。

@insertusernamehere 的伟大基础知识！无论我做什么，我都无法让我的形象出现……直到，我回到了基础。图片尺寸太大，iPhone 不喜欢加载超过 700kbs 的图片。所以，我把它减少到 32kb，然后我们就开始行动了。

于 2016-01-04T20:29:02.823 回答
1

背景图像在 IOS 浏览器 (iPhone/iPad) 上消失。这是我使用的代码：

/*CSS*/
.bg-image {
    background: url([URL]) center/cover no-repeat;
}
于 2019-01-30T14:03:38.713 回答
1

或者，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>

这段代码在 iPhone Safari、Android Chrome 和 web Safari 上进行了测试。希望这会有所帮助。

于 2019-04-05T06:07:11.820 回答
0

我没有看到有人特别说这个，但你也必须定义宽度。从那以后，因为我将背景大小设置为“包含” - 它必须知道容器的尺寸是多少。

一旦我这样做了，背景就会按预期呈现。

@media only screen and (max-width:599px) {
  [id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}

@media only screen and (max-width:479px) {
  [id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}

注意：需要为两个断点定义背景 URL，以便它适用于 iPhone 5 (iOS7)。

于 2015-03-24T20:53:21.237 回答
0

我有一个负面的文本缩进，它把我的背景图片从页面上扔了出去，所以颜色：透明的。

于 2014-12-11T07:20:15.447 回答
0

对于我的类似问题，我没有真正的解决方案/原因，但我的背景图像 PNG 图像根本不会显示，直到我将它移动到我的 (Cordova) iPad 应用程序中的新文件夹。我从字面上将它从 /css/images/sweden/myimage.png 移动到 /css/images/sv/myimage.png 并开始工作。另一个奇怪的事情是原始文件夹中的所有其他图像都可以正常工作（作为背景图像）。超级奇怪。如果我找到真正的原因/修复，我会报告。

于 2019-12-28T11:10:53.460 回答
0

我必须设置input { opacity: 0; }我的input + span {}图标才能显示。

于 2019-11-19T00:10:22.430 回答
0

添加背景颜色解决了我的问题

background-color: #F4F4F2;
于 2016-04-05T15:44:57.077 回答
0

我尝试调整背景图像的大小，使其太小而无法测试理论，但它仍然无法在 iPad（可能是 iPhone）上的任何浏览器上显示。尝试了此处列出的其他解决方案 - 仍然没有好处。然后我注意到该元素继承了display: table;. 添加display: block;以覆盖它，背景图像现在显示在我测试过的所有设备上。

于 2021-08-25T09:10:29.893 回答