背景:固定不重复不能在移动设备上工作 [英] background: fixed no repeat not working on mobile

问题描述

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

I am building a webpage where I want the background image to scale to fit the whole screen, maintain aspect ratio and be fixed (so if you scroll down, the background image stays in the same place).

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

I have achieved this in desktop browsers with the CSS below, but it doesn't work on an iPhone or iPad. On those devices the background is too big (it continues below the fold) and if you scroll down far enough, the image will start repeating. Anyone have a fix? THanks!

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

推荐答案

我找到了一个很好的解决方案，可以解决完全不需要 JavaScript 的移动设备上的固定背景.

I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all.

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 才能将其作为背景.

Please be aware of the negative z-index value of -10. html root element default z-index is 0. This value must be the smallest z-index to have it as background.

这篇关于背景:固定不重复不能在移动设备上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！