html - 背景 : fixed no repeat not working on mobile

Question

我正在构建一个网页，我希望背景图像可以缩放以适合整个屏幕，保持宽高比并固定(因此，如果您向下滚动，背景图像将保持在同一个位置)。

我已经使用下面的 CSS 在桌面浏览器中实现了这一点，但它在 iPhone 或 iPad 上不起作用。在这些设备上，背景太大(它继续低于折叠)，如果您向下滚动足够远，图像将开始重复。有人有办法解决吗？谢谢!

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

我找到了一个完全不需要 JavaScript 的移动设备固定背景的绝佳解决方案。

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

请注意 -10 的负 z-index 值。 html 根元素默认 z-index 为 0。此值必须是最小的 z-index 才能将其作为背景。