2

我正在尝试在我的引导站点上获得全宽背景。我有这个适用于桌面浏览器，但移动设备没有玩球。这是我的代码（简化）；

html {
   background:url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  background-color: #131516 !important;
}
body {
  background-color: transparent !important;  (to override bootstraps default color)
}

我遇到的问题是我正在测试的许多移动设备（android/iphone）不支持固定位置，因此当您滚动页面时背景图像会向上移动。我的网站都建在一个页面中，因此将上面的代码仅移动到 body 标签意味着背景图像被真正拉伸，因为内容（现在 100% 高度）在垂直方向上很长。

如果有更好的 css 方式来做到这一点，那将是理想的，但我可以想象 jquery 是需要的。我从这里尝试了一些 jquery 示例，但没有一个可以正常工作。有没有人有一个简单的跨平台方式来完成这项工作？

4

1 回答 1

0

制作一个 div 并使用 position: fixed。

.background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:url(../img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%; /* or change accordingly - not quite clear in question */
  width: 100%;
  background-color: #131516 !important;
}

希望这可以帮助。

于 2013-09-13T17:38:08.887 回答