Question

我完全难过了。这个问题浪费了我太多的时间。

我有两个视差滚动背景 - 几乎完美地工作。增加对手机网站的响应能力。如果我使用chromes移动模拟器，完美适用于每个设备。如果我在Android手机上使用它，完美...但是在iOS上，第一个背景图像适用但第二个是不可见的。所有你看到的是内容和白色背景。它完全没有意义，考虑到它们具有相同的设置 - 我尝试重命名图像，更改图像文件类型，使用与background-1相同的图像，但没有一个工作。我已经尝试删除我的整个代码库，尝试从下到上调试它 - 没有实现。唯一值得注意的事情是，如果我完全移除了.background-1，那么.background-2的背景图像的一小部分显示 - 尽管它的高度为100vh。

总结一下：完美地在模拟器上工作，完美的Android手机 - 两个几乎完全相同的div工作之一。

.background-1 {
  background-image: url("image1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: lighten;
  background-color: rgba(255, 255, 255, 0.2);
  height: 100vh;
  width: 100%;
  position: relative;
}

.background-2 {
  background-image: url("image2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: lighten;
  background-color: rgba(255, 255, 255, 0.2);
  height: 100vh;
  width: 100%;
  position: relative;
}

<div class="background-1"> </div>

<div class="information">This div contains some information.....</div>

<div class="background-2"></div>

Answer 1

有点回答 - 图像现在可见

参考：https://css-tricks.com/forums/topic/parallax-on-mobile/

添加背景附件：滚动;似乎可以做到这一点。

仅在iOS设备上打破的两个背景图像之一

1 个答案: