Question

我遇到了一个问题，我无法弄清楚如何只使用css解决。

在响应式网页上，我在每个页面上都有一个全宽背景，通过以下css加载到带有类（bg）的div上：

.bg{
   position:fixed;
   top:0px;
   z-index:-999;
   width:100%;
   height:100%;
   background-size: cover;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
  }

但问题是，如果页面内容很长，这些图像会在移动设备上造成问题。（背景将延伸到覆盖所有页面内容，甚至是屏幕外内容），这意味着我经常只能在这些单元中看到背景左上角的污迹。

因为我还需要这个向后兼容（IE 8+）我不能只依赖CSS3的'封面'所以我已经没有了无脚本的解决方案。

任何提示/想法都会受到极大关注！

Answer 1

您可以尝试在body标签上使用css元素，如此

#background {
      背景图像：网址（ 'URL /到/图像/的/ choice.jpg'）;
      背景重复：重复-Y;
  }

这一切都在css1中，所以它应该向后兼容你可以将它添加到你的bg或其他类或id中。

全宽背景响应网站

1 个答案: