0

アプリに、3 つの異なる背景を必要とする要素があり、それらを水平方向に積み重ねる (?) 必要があります。

SliceA は 3 つのうちの最初のもので、幅は 66px です。次に、SliceA が終了した直後に SliceB を開始し、SliceC が開始する直前に停止するまで x を繰り返します (重要な場合は、この最後のスライスは 21px です)。

私がそうするなら今：

background-image: url('imgs/hint1_sliceA_66x29.png'), url('imgs/hint1_sliceB_1x29.png'), url('imgs/hint1_sliceC_21x29.png');
background-repeat: no-repeat, repeat-x, no-repeat;

実際には、SliceB は x 軸で繰り返されますが、要素の幅全体にわたって繰り返されます (これらのスライスには透過性があるため、最終的には背景スライスの 1 つが別のスライスの下にあるかどうかを確認できます)。とにかく私は素朴にこれを試しました：

background-position: left bottom, 66px -21px bottom, right bottom;

しかし、背景要素の 1 つの左マージンと右マージンを定義することはできないようです。

これを達成する方法についての回避策はありますか? 何か案は？ありがとう！

4

1 に答える 1

1

画像に透明度がない場合は、背景の順序を変更する限り機能します (つまり、中央の繰り返し背景をリストの最後に移動します)。この例では、背景画像に透明な背景があり、重なり合った背景を見ることができます。ブラウザの互換性についてこれをテストすることをお勧めします。Linux の Chrome および Firefox で動作します。

    background-image: 
        url('imgs/hint1_sliceA_66x29.png'),
        url('imgs/hint1_sliceC_66x29.png'),
        url('imgs/hint1_sliceB_66x29.png');
    background-position: left bottom, right bottom, left bottom;
    background-repeat: no-repeat, no-repeat, repeat-x;​

これが当てはまらず、状況が許す場合は、画像を透明要素を持たない画像に変換するのが最も簡単な場合があります。

または、パディングとbackground-clipプロパティを使用することもできます。例:

    background-clip: border-box, border-box, content-box;
    -webkit-background-clip:border-box, border-box, content-box;
    padding: 0 66px;
于 2012-11-14T20:33:48.777 に答える