固定背景图像在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/

UPDATE：

我试着从下面阿齐兹”的解决方案。 玩弄背景大小：自动100％使智能手机上的图像看起来更好，但它们没有加载到手机苹果设备上。 但是，如果设置了background-size：cover，所有背景都会被加载，问题是仅显示图像的一小部分（图像的右上方？！），而这部分很模糊（看起来像放大）。 由于我没有改变任何东西比设置背景大小：封面到背景大小：100％自动，我不能相信，图像堆叠在一起。

目前我已经设置了背景大小：100％，这在桌面设备上看起来最好，到目前为止移动设备还行，只要背景是背景，我不会担心布局未正确加载。

我明白，背景大小：100％自动不是最好的背景方式，并会定义考虑解决方案1.我不明白的是，为什么只有一个背景被加载，当加载在iPhone上的网站。背景位置：中心是否将所有背景都堆叠在屏幕上的相同位置，以便我只能看到已加载的最新的背景？请记住：网站上大约有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; 
 
}

Answer 2

您的background-size设置了单个值宽度。这转换成background-size: 100% auto，其中高度是自动的并保留高宽比。与的background-position耦合将导致背景位于视口的中间，并且周围有空白。

演示：

的jsfiddle：https://jsfiddle.net/azizn/0dy8dL7z/

---

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

默认background-size: 100%指的宽度为100％并且高度是自动的。这对横向分辨率或设备非常有用。但是，当设备处于纵向显示时，会有很多垂直空白。你可以使用这个逻辑，但打开它，这样的高度是100％，宽度为汽车应用background-size: auto 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：绷背景

你可以通过应用背景尺寸解决这个问题：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

在你的背景图片的CSS添加以下代码：背景尺寸：100％100％;

Answer 4

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

如果您只想在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; 
} 

我用

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

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

的检测经由用户代理的iOS参考重要的因为我只用一个选择器，为了取t他优先于当前的代码。

这工作在iPhone 6s Plus。

Answer 5

试试这个简单的东西，用于跨浏览器背景大小的封面。他们爱背景大小也覆盖，但有不同的方式:)

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

Answer 6

我认为浏览器的问题，其通过使用javascript获取设备信息。然后按不同分辨率的设备加载图像。