5

700x300の背景がメインのcontent-div内でシームレスに繰り返されています。次に、content-divの下部にdivを添付します。これには、繰り返し不可能な別の背景画像が含まれ、その上の繰り返し可能な背景とシームレスに接続されます。基本的に、再現不可能な画像は、再現可能な画像の最後の部分のように見えます。

パターンの性質上、content-divのバックラウンドの最後の繰り返しで背景画像の300ピクセルの高さ全体が表示されない限り、下のdivの背景はシームレスに接続されません。基本的に、コンテンツdivの高さはすべての状況で300pxの倍数である必要があります。この種の問題への良いアプローチは何ですか？

ページの読み込み時にcontent-divのサイズを変更しようとしましたが、これは、content divにサイズ変更の動的コンテンツが含まれていない場合にのみ機能します。これは、私の場合ではありません。

function adjustContentHeight()
{
    // Setting content div's height to nearest upper multiple of column backgrounds height, 
    // forcing it not to be cut-off when repeated.

    var contentBgHeight = 300;
    var contentHeight   = $("#content").height();
    var adjustedHeight  = Math.ceil(contentHeight / contentBgHeight);

    $("#content").height(adjustedHeight * contentBgHeight);
}

$(document).ready(adjustContentHeight);

私が探しているのは、divのサイズ変更イベントに対応する方法ですが、そのようなことはないようです。また、content-div内のコンテンツのサイズ変更を制御するJSにアクセスできないと仮定してください。ただし、これは問題を解決する方法である可能性があります。

私が考えていたもう1つの解決策は、コンテンツdivの高さに応じて、下部divの背景画像を一定量オフセットすることでした。繰り返しになりますが、不足しているのはサイズ変更イベントに応答する機能のようです。

4

4 に答える 4

1

もう 1 つの方法はbackground-position、コンテンツ DIV のサイズに基づいて下部 DIV と上部 DIV のスタイルを計算することです。負の位置を使用して、下端を別の上端に揃えることができます。

さらに別のアプローチは、階層化された DIV アプローチを使用することです。この場合、トップ、コンテンツ、およびボトムはすべて、背景を含む親 DIV の子になります。

これらのアプローチの利点は、背景を管理するためだけにコンテンツ DIV の自然なレンダリングを変更しないことです。

例: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html

于 2010-03-21T00:38:35.200 に答える
0

上部に何も一致させる必要がない場合は、繰り返し画像を div の下部に配置します (オーバーフローが上部にこぼれるようにします)。このような：

div#repeating { background: transparent url('/path/to/image') repeat left bottom; }

于 2010-04-14T07:46:25.183 に答える
0

css の設定background-position: fixedは役に立ちますか? 次に、下部の div を移動できますが、その背景画像はページの上部に対して固定されたままになります。繰り返しの画像がより多く表示されると、下部の画像がより多く隠されます。

これは、「すべての状況でコンテンツ div の高さを 300px の倍数にする」ではなく、「コンテンツ div の高さに応じて、下部 div の背景画像を一定量オフセットする」という見出しの下に表示されます。

于 2010-03-24T09:18:53.287 に答える
0

div にイベント リスナーを追加してみてください。


        var div = document.getElementById("content");
        div.addEventListener("resize", adjustContentHeight, false);
于 2010-03-28T15:09:25.223 に答える