固定的背景图像在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的解决方案.使用背景大小:自动100%使智能手机上的图像看起来更好,但它们不会加载到移动苹果设备上.但是,如果设置了background-size:cover,所有背景都会被加载,问题是,只显示图像的一小部分(图像的右上角？!),这部分非常模糊(看起来像放大).由于我没有改变任何设置背景大小:覆盖到背景大小:100%自动,我不敢相信,图像相互堆叠.

目前我已经设置了背景大小:再次100%,这在桌面设备上看起来最好,到目前为止移动设备还可以,只要背景没有正确加载,我就不会开始担心布局了.

据我所知,这样的背景下,大小:100%的汽车是不是为背景的最好的方式,将definetly考虑解决方案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设备上正常显示.

---编辑---根据这个问题: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-positionof 耦合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标签而不是背景.

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