2

私が作成しているブログをテーマにするために、いくつかの背景 div を設定しました。見出しに 3 色、灰色の背景を使用しており、背景にテクスチャを追加したいと考えています。タイリングしたい半透明の画像がありますが、これを機能させる最良の方法がわかりません。position: fixed;スクロールすると画像が移動するように、画像を含む div は必要ありません。

コード例: http://jsfiddle.net/YPXmT/

スクロールバーがなくてもこれを達成する方法はありますか? (コンテンツにはスクロールが必要な場合があるため、スクロールバーを削除したくないことに注意してください。)

4

1 に答える 1

3

あなたの例のフィドルから行くと、あなたはほとんどそこにいました。あなたがしなければならないのは、使用した静的ピクセル値の代わりに、 backgroundTexture divheightを作成することだけです。width 100%

#backtexture {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

よりシンプルな更新:
ほとんどの場合、シンプルさが最善です。
追加する必要があるのは、次のとおりです。

body{
    position: relative
}

以下のように、コンテナ div を作成して要素を再配置する必要はありません。ボディの位置を相対的にするだけで、これを修正できます。

更新：（ 上記の更新を使用し、後世のためにこれを保持します）
以下のコメントに従って、上記のコードでは、ウィンドウが表示スペースを超えてスクロールするコンテンツには背景が含まれません。これは、div が and に設定されているためposition: absoluteですheight/width: 100%。div は表示可能なスペースのサイズに合わせてサイズ変更されていますが、それを超えるコンテンツがあると、背景の div が停止したように見えます。この問題を解決するには、HTML と CSS をもう少し調整する必要があります。上記の CSS の代わりに以下を使用します。

#backtexture {
    width: 100%;
    height: 100%;
    background : url('http://static.tumblr.com/wyzt2fm/Hq8mhgfry/hp_asset_diagonalline.png');
}

position:absoluteとを削除したことに注意してくださいoverflow:hidden。次に、HTML を変更して、背景がページに配置された単なる空の div ではなく、ページ上の他のすべての要素のコンテナーとして使用されるようにします。

<div id="backtexture">
        <div id="redtop"></div>
        <div id="orangetop"></div>
        <div id="yellowtop"></div>
        <div id="wrapper">
</div>

そして、それはそれを行う必要があります。

分岐フィドル: http://jsfiddle.net/digthedoug/pVxSq/

于 2013-01-30T20:41:11.420 に答える