1

我正在尝试将元素的内容用作页面背景。我可以让它在我的浏览器窗口的长度上正常工作，但是一旦内容滚动，div 就会停止。 http://jsfiddle.net/MaxPRafferty/QXYDb/

html:

<html><head><title></title></head>
  <body>
    <div id="background"></div>
    <div id="content" style="height:900px;">Lorem Ipsum
      <br />...an arbitrary amount of content...</div>
  </body>
</html>

CSS：

#content, #background {
  position:absolute;
  top:0; right:0; bottom:0; left: 0;
}
#content {
  z-index:2;
}
#background {
  background:red;
  z-index:1;
}

我已经尝试过所有旧的仿柱技巧的变体，但这些技巧的问题是使用背景来掩盖不同的高度 - 在这种情况下，背景是有区别的。

我可以用 javascript 轻松做到这一点，但如果我能用纯 css 做到这一点，我会很高兴。我已经敲了几天，没有任何进展，所以谢谢你的想法。

编辑1：我希望背景与内容一起滚动，因为实际上背景将包含重复或可能大于视口的内容：http: //jsfiddle.net/MaxPRafferty/gquHF/

4

1 回答 1

1

只需将背景固定而不是绝对定位：http: //jsfiddle.net/QXYDb/4/

CSS看起来像这样：

#background {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left: 0;
}
#content {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left: 0;
}

这会导致背景始终保持在相对于视口的位置。

于 2013-01-24T21:28:58.500 回答