背景:修复不重复不在手机上工作

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

请注意负面z-index价值-10.htmlroot元素默认z-index是0.该值必须是最小值z-index才能将其作为背景.

Answer 2

在尝试了所有解决此问题的方法之后，我对此有一个非常简单的解决方案。

我在我的移动 IOS 设备上遇到了问题。

css（桌面）

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

然后我用媒体查询覆盖它，删除“固定”作为背景附件。

css（移动）

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

初始 - 将此属性设置为其默认值。我认为因为 IOS 不接受“固定”，所以它会回退到它接受的默认值，滚动。

这在每台设备上都对我有用。希望它也能帮助其他人。

Answer 3

我认为移动设备不能在固定位置工作。您应该尝试使用一些 js 插件，例如 skrollr.js（例如）。使用这种插件，您可以根据滚动条位置选择 div（或其他内容）的位置。