固定的背景图片在iPhone/iPad上消失了

Question

固定的背景图片在iPhone/iPad上消失了

htmlcssiphonebackground-imageparallax

5

我遇到了background-image的问题。我的网站在Android设备上看起来很好，但后来发现iPhone和iPad不支持background-size: cover。

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

在网络上的iPhone模拟器上，网站看起来还不错，但是一旦在真正的iPhone（iOS 9.3）上测试网站，背景图片就无法显示。

标题图片加载正常，该图片在网站其他区域也被用作背景图，那里也能显示出来。只有在标题图片下方的另一张图片开始加载，但由于某种原因似乎被中止了。

图片的尺寸为：1920x1080。

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

更新：

我尝试了下面Aziz的解决方案。在智能手机上调整背景大小为自动100%可以使图像看起来更好，但在移动苹果设备上不会加载。然而，如果设置background-size: cover，则会加载所有背景，问题是只显示图像的一小部分（右上角？！）并且这部分相当模糊（看起来像放大了）。由于我除了将background-size: cover更改为background-size: 100％ auto之外没有更改任何内容，因此我无法相信图像正在堆叠在彼此上面。

目前我再次将background-size: 100％设置回来，在桌面设备上看起来最佳，并且对于移动设备来说也还可以，只要背景正确加载就不用担心布局。

我知道，background-size: 100% auto 不是最好的背景方式，一定会考虑解决方案1。但我不明白的是，在iPhone上加载网站时为什么只加载一个背景。是因为 background-position: center 只将所有背景堆叠在屏幕上的同一位置，所以只能看到最新加载的背景吗？请记住：网站上有大约6个背景，但只显示其中一个，它是用于标题的那个图片。

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

- christian

7个回答

5

您的background-size设置了一个单一的值-宽度。这意味着background-size: 100% auto中的高度是自动的，并且保持纵横比例。将其与background-position的center相结合，将导致背景位于视口中心并带有周围的空白。

演示：

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：拉伸背景

您可以通过应用 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标签代替背景。

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

- Aziz

感谢您详细的回答。我明白，background-size: 100% auto 不是最好的背景方式，我一定会考虑解决方案1。但我不明白的是，在iPhone上加载网站时为什么只有一个背景被加载。是因为 background-position: center 将所有背景都堆叠在屏幕的同一位置，所以我只能看到最新加载的那个背景吗？请记住：该网站总共有约6个背景，但只显示其中一个，即其图像也用于页眉的那个。 - christian

它们可能是相互堆叠的，尝试删除所有内容，只保留背景div并测试它。不幸的是，我没有任何苹果设备。您可以尝试使用.container {display: none}或禁用fixed附件，以确保图像确实已加载。 - Aziz

3

很遗憾，iOS设备无法以这种方式使用视差效果，因为它们并不真正支持background-attachement规则。

如果您只想在iOS设备中去除此效果，可以使用用户代理来检测设备，并将一个类添加到body中。

示例：

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

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

检测iOS的用户代理参考：在jQuery if / then语句中识别iOS用户代理的简单方法？

使用该JS代码，您可以应用以下CSS：

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

我使用了important，因为只使用了一个选择器，以便提高当前代码的优先级。

这在iPhone 6s Plus上有效。

- Ardian

如果您不想使用jQuery，您可以非常容易地将类添加到“html”元素中：document.documentElement.classList.add('is-ios')。 - chichilatte

1

在你的背景图像CSS中添加以下代码：background-size: 100% 100%;

- Arunkumar

1

尝试使用这些简单的方法实现跨浏览器背景大小覆盖。它们也喜欢背景大小覆盖，但是以不同的方式实现：

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

- Welyanto

1

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

- vjking9

0

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

- Suraj Vaghela

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frits · Accepted Answer

这里的一个主要问题是iOS移动设备在渲染background-size:cover;和background-attachment:fixed;时存在错误。

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

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