固定背景图像在 iPhone/iPad 上消失

Question

我在使用 background-image 时遇到问题。我的网站在 Android 设备上看起来不错，然后我发现 iPhones 和 iPad 不喜欢 background-size: cover。

我通过设置 background-size: 100% 解决了这个问题。

在网络上的 iPhone 模拟器上，站点看起来还不错，但是一旦在真实的 iPhone (iOS 9.3) 上测试站点，背景图像就会未显示。

加载 header 图片，该图片用作网站下方的背景，它也显示在那里。仅加载背景正上方的另一张图片开始加载，但随后似乎由于某种原因中止。

图片尺寸为：1920x1080。

网站：http://www.unterwasserfotografie-thomas-uhl.de/

更新：

我已经从下面尝试了 Aziz 的解决方案。使用 background-size:auto 100% 使图像在智能手机上看起来更好，但它们不会加载到 mobile 苹果设备上。然而，如果 background-size: cover 被设置，所有的背景都被加载，问题是，只有一小部分图像被显示（图像的右上角？！）这部分相当模糊（看起来像放大了）。因为除了将 background-size:cover 设置为 background-size:100% auto 之外，我没有做任何更改，所以我无法相信图像会相互堆叠。

目前我已经再次设置了 background-size:100%，这在桌面设备上看起来最好，并且到目前为止对于移动设备来说还可以，我不会开始担心布局，只要背景加载不正确。

我明白，background-size: 100% auto 不是最好的背景方式，肯定会考虑解决方案 1。我不明白的是，为什么只有一个背景被加载，在 iPhone 上加载站点时。 background-position: center 是不是简单的把所有的背景都堆在了屏幕的同一个位置，让我只能看到最新加载的那个？请记住：网站上总共有大约 6 个背景，但只显示了其中一个，它的图像也在 header 中使用。

感谢您迄今为止的支持，我将悬赏这个问题，因为我真的很想解决这个问题。

Answer 1

您的 background-size 设置了一个值 - 宽度。这转化为 background-size: 100% auto ，其中高度是自动的并保持纵横比。将其与 center 的 background-position 耦合将导致背景位于 viewport 的中间，周围有空白。

示范：

jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/

解决方案 1： 自动宽度而不是自动高度

默认background-size: 100%表示宽度为100%，高度为自动。这适用于宽分辨率或横向设备。然而，当设备处于纵向时，会有很多垂直空白。您可以使用该逻辑，但可以通过应用 background-size: auto 100%;

来切换它，使高度为 100%，宽度为自动

div {
  height:400px;
  border:1px solid red;
  background: url(http://lorempixel.com/970/540) fixed no-repeat center;
  background-size:auto 100%;
}

div:nth-of-type(2) {
  background-image: url(http://lorempixel.com/960/541);
}

p {
  background:#FFF;
  padding:3em;
  margin: 0;
}

<div></div>
<p>Lorem Ipsum</p>
<div></div>

jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/4/

最好在 @media 查询中应用该规则以定位 landscape/mobile 设备。

解决方案 2： 拉伸背景

您可以通过应用 background-size: 100% 100% 在视口上拉伸背景并删除空白来解决此问题。虽然背景将失去其宽高比并且可能会出现奇怪的拉伸。

div {
  height:400px;
  border:1px solid red;
  background: url(http://lorempixel.com/970/540) fixed no-repeat center;
  background-size:100% 100%;
}

div:nth-of-type(2) {
  background-image: url(http://lorempixel.com/960/541);
}

p {
  background:#FFF;
  padding:3em;
  margin: 0;
}

<div></div>
<p>Lorem Ipsum</p>
<div></div>

jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/2/

或者可以删除 background-position 或 fixed 附件，或者简单地使用 img 标签而不是背景。

每种解决方案都有其自身的缺点，因此请考虑更适合您项目的解决方案。

Answer 2

这里的主要问题之一是 iOS 移动设备在呈现 background-size:cover; 以及 background-attachment:fixed; 时出现错误。

因此，一个简单的解决方法是使用媒体查询在移动设备（屏幕宽度小于 640 像素）上更改 background-attachment 属性：

CSS:

@media (max-width:640px) {
  section {
    background-attachment:initial;
  }
}

通过在移动设备上更改 background-attachment 属性，您将允许图像在 iOS 设备上正确显示。

---编辑--- 根据这个问题：whosebug.com/questions/18999660/ iOS 背景属性的 shorthand 排序似乎有问题。

也许尝试像这样转换你的短手：

.bg-1 { 
  background-image: url(../Dateien/sharkGround1920.jpg); 
  background-size: cover; 
  background-attachment:fixed; 
}

Answer 3

在您的背景图片中添加此代码 css : background-size :100% 100%;

Answer 4

遗憾的是，您不能在 iOS 设备中以这种方式使用视差效果，因为它们并不真正支持 background-attachment 规则。

如果您只想在 iOS 中取消此效果，您可以使用用户代理检测设备并将 class 添加到 body.

示例：

var _isOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/);

if (_isOS) {
  $('body').addClass('is-os');
}

通过用户代理检测iOS参考：Simple way to identify iOS user agent in a jQuery if/then statement?

通过这种方式使用该 JS 代码，您可以应用以下 CSS：

body.is-os section {
  background-attachment: initial !important;
  background-size: cover !important;
}

我使用了 important 因为我只使用了 one 选择器，以便优先使用当前代码。

这在 iPhone 6s Plus 中有效。

Answer 5

为跨浏览器背景尺寸封面尝试这个简单的事情。他们也喜欢背景尺寸封面，但方式不同:)

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

Answer 6

我认为使用 javascript 获取设备信息是浏览器的问题。然后根据不同分辨率的设备加载图像。

Answer 7

@media (max-width:640px) {
  section {
    background-attachment:initial;
  }
}

固定背景图像在 iPhone/iPad 上消失

Fixed background images disappear on iPhone/ iPad

html

css

iphone

background-image

parallax