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 に答える