3

背景の各行にランダムな x オフセットがあるタイル背景を作成したいと考えています。それは理想的ですが、CSSでそれが不可能な場合（そうではないと思います）、少なくとも単一の画像を使用して、この画像のこの数行（4行としましょう）が異なるxを持つボディの背景を作成する最良の方法は何ですかポジション？

何かのようなもの：

イメージイメージイメージイメージ
MAGEImageImageImagei
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA
イメージイメージイメージイメージ
MAGEImageImageImagei
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA
4

2 に答える 2

1

あなたの画像のサイズはどうなりますか？それが非常に小さい場合、簡単な解決策はフォトショップ/ペイントでそれを行うことです。結果の画像は 4 倍大きくなりますが、小さい画像 (25ko 未満) の場合、これが最も簡単な方法だと思います。少なくとも、あなたの問題に対する簡単なCSS ソリューションは見当たりません。

画像が非常に大きく、その高さがわかっている場合は、最終的に次のアプローチを取ることができます: http://jsfiddle.net/7GPTy/

アイデアは、左の値が異なる絶対位置でいくつかのdivを作成することz-index:-1ですheight == image_height...私はそれを粗いが実用的な解決策と見なします

var mybody = document.getElementById('body');
var bodyHeight = mybody.offsetHeight;
var imgHeight = 49; // you could get the size by opening the file
var offsetLines = 4; // this is the number of offset you asked, but you can change that!
var nbOfLines = Math.ceil(bodyHeight/imgHeight);
for(var i=0; i<nbOfLines; i++){
    var newBgDiv = document.createElement('div');
    newBgDiv.className = 'backgroundImg imgOffset_'+(i%offsetLines);
    newBgDiv.style.top = (i*imgHeight) + 'px';
    newBgDiv.style.height = imgHeight + 'px';
    newBgDiv.style.width = '100%';
    mybody.appendChild(newBgDiv);
}

js コードをすばやく確認するには、基本的にページの高さを取得し、それを画像の高さで割り、背景全体を生成するために作成する必要がある div の数を把握します。完了したら、必要な異なる行オフセットの数を定義するだけで ( offsetLines)、div を生成します。

私の例では、オフセットはウィンドウのサイズによって異なります (ウィンドウのサイズを水平方向に変更してみてください。オフセットが変化することがわかります)。もちろん、定義したピクセル数に固定することもできます!

于 2012-11-19T12:18:11.183 に答える
0

CSS3がプロジェクトに適している場合は、複数の背景を使用してこれを行うことができます。

パターンの高さの2倍の画像を作成し、上半分をパターンで塗りつぶし、下半分を透明にします。

次に、複数の背景を使用して、次のように適切に配置します。

.div {
    background: url(path/to/image.png) 0 0 repeat,
                url(path/to/image.png) 0 {height of image in pixel} repeat
}

ランダムなオフセットではありませんが、これに十分なバリエーションがあるため、違いを区別するのは難しいでしょう。

知覚されるランダム性を追加したい場合は、この投稿をご覧ください。

于 2012-11-19T12:33:19.643 に答える