Question

我有一个在向下滚动页面时保持位置的背景图像。请参见JSFiddle：JS Fiddle
的代码

body {
  font-family: 'Open Sans', sans-serif;
  background-image: url("http://vrexpert.virtualrealities.netdna-cdn.com/wp-content/uploads/2015/12/Google5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  overflow-x: hidden !important;
  }

的然而
使用移动设备时不会应用此功能..（例如我使用的是iPad）。图像不会随页面一起滚动。

如何在移动设备上获得与在桌面上相同的结果？

Answer 1

请尝试以下操作:(改编自background: fixed no repeat not working on mobile）

body:before {
  font-family: 'Open Sans', sans-serif;
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("http://vrexpert.virtualrealities.netdna-cdn.com/wp-content/uploads/2015/12/Google5.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

原因在于：

background-attachment: fixed;

不会使用此设置滚动。只需使用scroll代替

CSS背景图像不在移动设备上滚动

2 个答案: