固定背景图片在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＆＃39;从下面解决。 使用背景大小：自动100％使智能手机上的图像看起来更好，但它们不会加载到移动苹果设备上。 但是，如果设置了background-size：cover，所有背景都会被加载，问题是，只显示图像的一小部分（图像的右上角？！），这部分非常模糊（看起来像放大）。 由于我没有改变任何设置背景大小：覆盖到背景大小：100％自动，我不敢相信，图像相互堆叠。

目前我已经设置了背景尺寸：100％，这在桌面设备上看起来效果最好，到目前为止对于移动设备来说还不错，我不会开始担心布局问题背景未正确加载。

据我所知，背景大小：100％自动并不是最好的背景方式，并且肯定会考虑解决方案1.我不明白的是，为什么加载网站时只有一个背景被加载在iPhone上。 background-position：center是否只是将所有背景堆叠在屏幕上的相同位置，这样我才能看到已加载的最新背景？请记住：网站上总共有大约6个背景，但只显示其中一个，它也是标题中使用的图像。

感谢您的支持到目前为止，我将为这个问题设置一个赏金，因为我真的对此问题感到绝望。

Answer 1

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

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

CSS：

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

通过更改移动设备上的background-attachment属性，您可以在iOS设备上正常显示图片。

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

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

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

Answer 2

您的background-size设置了一个值 - 宽度。这转换为background-size: 100% auto，其中高度是自动的并保留纵横比。将其与background-position center相关联将导致背景位于视口的中间，并且周围有空格。

演示：

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查询中应用该规则来定位横向/移动设备。

解决方案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 3

很遗憾，您无法在iOS设备中以这种方式使用视差效果，因为它们并不真正支持背景附加规则。

如果您只想在iOS中放松此效果，可以使用用户代理检测设备并将类添加到正文。

示例：

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;
}

我使用重要，因为我只使用一个选择器，以获取当前代码的优先级。

这适用于iPhone 6s Plus。

Answer 4

Add this code in your background image css : background-size :100% 100%;

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;
  }
}