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

Question

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

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

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

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

图片大小为: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 个背景，但只显示了其中一个，它的图像也在标题中使用。

感谢您迄今为止的支持，我将悬赏这个问题，因为我真的对这个问题感到绝望。

Answer 1

这里的主要问题之一是 iOS 移动设备呈现错误 background-size:cover;连同 background-attachment:fixed; .

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

CSS:

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

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

---编辑---根据这个问题:stackoverflow.com/questions/18999660/ iOS 上背景属性的速记排序似乎有问题。

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

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