0

に40×40ピクセルの繰り返し背景テクスチャを使用するドキュメントがありますbody。

次にdiv、幅と高さが設定され、中央にmargin: 40px auto 0 auto;

さて、これの背景画像div（たとえば、要素自体と同じ960×500）は、と同じテクスチャを持っていbodyます。この画像で実現しようとしているグラフィック効果のため、透明なpngを使用できません。

ただし、エフェクトを機能させるには、背景がdivのテクスチャとシームレスである必要がありますbody。ユーザーは、そこに別のブロック要素があることを認識できないようにする必要があります。テクスチャの無限の海、そのすべての真ん中にディテールがあります。

divこれは、が中央に配置されるため困難になり、そのため、左からの水平距離が変化します。

ページ幅に関係なく、の背景テクスチャがbody常にdiv ピクセルのシミュレートされたテクスチャと一致することを確認するにはどうすればよいですか？

必要に応じてJSソリューションを使用することは怖くありませんが、純粋なCSSソリューションを好むことは明らかです。

4

2 に答える 2

1

実行したいのは、body要素の背景画像を中央から開始するように設定することです。それで：

body {
    background: url(to/your/tile.png) 50% 0;
}

これは、ウィンドウのサイズがどのように変更されても、繰り返しパターン内に予測可能な領域があることを意味します。

次に、本文にタイリングを作成するために、含まれているdivの背景を調整する必要があります。

このメソッドがどのように機能するかを示すコードを次に示します：http：//jsbin.com/olabos/2/edit。ウィンドウのサイズを変更しても、パターンの同期が崩れないことに注意してください。プレビューの中央にカーソルを合わせると、ラッピングdivがどこにあるかがわかります。

注：この手法にはいくつかの注意点があります。ブラウザが0.5ピクセルを処理する方法に応じて、背景に1ピクセルの違いが生じます。私はあなたの問題を解決する別のテクニックを知りません、それでうまくいけばあなたは1pxオフで生きることができます。

于 2012-11-02T05:12:29.523 に答える
1

ボディの背景として 40x40 のタイル画像を使用し、その上に同じ背景を持つ 960x500 の画像を使用しようとしている場合は、次のコードを使用します。

body {
    background: url(repeat.png) top center repeat; /* 40x40 image goes here */
}

div {
    background: url(overlay.png); /* overlay image goes here, must be multiple of 40px wide, example is 960px wide x 500px tall */
    width: 960px; /* must be multiple of 40px wide */
}

この CSS スニペットを編集する必要があるかもしれませんし、継ぎ目を揃えるためにオーバーレイされた画像を少し調整する必要があるかもしれませんが、これにより、継ぎ目が互いにうまく並ぶはずです。以前にいくつかのサイトで使用しましたが、うまく機能しています。

ご不明な点がある場合、または特定のシナリオを見落としている場合はお知らせください。もう一度確認いたします。あなたのコードの例が役に立ちます。

于 2012-11-02T05:04:04.183 に答える