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

【问题标题】：CSS Background image not scrolling on mobile devicesCSS背景图像不在移动设备上滚动
【发布时间】：2015-12-14 15:44:38
【问题描述】：

我有一个在向下滚动页面时保持原位的背景图像。在此处查看 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）。图片不随页面滚动。

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

【问题讨论】：

标签： css html twitter-bootstrap background

【解决方案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;
}

【讨论】：

【解决方案2】：

原因在这里：

background-attachment: fixed;

此设置不会滚动。只需改用scroll

【讨论】：

我相信他想要修复它，以便内容滚动而不是背景。他已经达到了预期的效果，但它并没有转移到手机上。 "I have a background image that stays in positions when scrolling down the page...""However this does not get applied when using a mobile device"
好吧，但他也写：The Image does not scroll along with the page，所以页面在滚动，但不是背景，他不喜欢...
还有他明确声明background-attachment: fixed;的事实，我认为这表明了意图。我认为"The Image does not scroll along with the page" 有点错别字……但无论如何，让我们看看这个人自己怎么说:)