我在使用 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 个背景,但只显示了其中一个,它的图像也在标题中使用。
感谢您迄今为止的支持,我将悬赏这个问题,因为我真的对这个问题感到绝望。
最佳答案
这里的主要问题之一是 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;
}
关于html - 固定背景图像在 iPhone/iPad 上消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36686654/