背景:固定不重复不在移动设备上工作?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

我正在构建一个网页,我希望背景图像能够缩放以适应整个屏幕,保持纵横比并被固定(因此,如果向下滚动,背景图像保持在同一位置)。

我已经在桌面浏览器中使用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;
}
提问于
用户回答回答于

css(desktop)

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

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

css(mobile)

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

    background-attachment: initial;

}
}
用户回答回答于
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;
}

所属标签

可能回答问题的人

  • Hanzo

    6 粉丝0 提问7 回答
  • Richel

    9 粉丝0 提问3 回答
  • mariolu

    31 粉丝0 提问2 回答
  • 上云小秘书

    15 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券