1

我遇到了一个问题，我无法完全弄清楚如何仅使用 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 的“封面”，所以我已经用完了无脚本的解决方案。

任何提示/想法将不胜感激！

4

1 回答 1

0

您可以尝试在 body 标记上使用 css 元素，如下所示

#background{
background-image:url('url/to/image/of/choice.jpg');
背景重复：重复-y；
}

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

于 2013-04-19T13:10:52.603 回答