web-dev-qa-db-ja.com

複数の背景画像の配置

幅643ピクセルの3つの背景画像があります。私はそれらを次のように設定したい：

  • top image（12px height）no-repeat

  • 中間画像repeat-y

  • bottom image（12px height）no repeat

私はそれらをオーバーラップさせずにそれを行うことはできないようです（画像が部分的に透明であるため、これは問題です）、これのようなものは可能ですか？

background-image:    url(top.png),
                     url(bottom.png),
                     url(middle.png);

background-repeat:   no-repeat,
                     no-repeat,
                     repeat-y;

background-position: left 0 top -12px,
                     left 0 bottom -12px,
                     left 0 top 0;
csscss3backgroundbackground-imagebackground-position
34
Juddling

あなたの問題は、repeat-yが最初の位置に関係なく、高さ全体を埋めることです。したがって、上下に重なります。

1つの解決策は、上部と下部の12pxによってコンテナの外に配置された疑似要素に繰り返し背景をプッシュすることです。 ここで結果を確認できます （デモの不透明度は、オーバーラップが発生していないことを示すためのものです）。不透明度がない場合、 こちらを参照 。関連するコード（CSS3ブラウザーでテスト済み：IE9、FF、Chrome）：

[〜＃〜] css [〜＃〜]

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* Push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

IE8サポート（複数の背景をサポートしない）が必要または必要な場合は、メインdivに上部の背景を配置し、div:after擬似要素を使用して下部の背景を配置できます。容器。

48
ScottS

他のブロックと重複することなく、配置する背景と同じブロックにパディング/境界線を追加できる場合は、background-clip＆background-Origin上部と下部の背景をパディング/境界線の上に配置し、繰り返しの背景をコンテンツ/パディング+コンテンツの上に配置します。

以下に例を示します。 http://dabblet.com/Gist/26688

コードについては、おそらく次のようなものを追加する必要があります。

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-Origin: padding-box, padding-box, content-box;

または

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-Origin: border-box, border-box, padding-box;

そして、あなたは必要なものを手に入れるでしょう。パディング/境界線を取得できない場合、ScottSのような擬似要素は完全に機能します。

6
kizu

次のようにしてください：

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

編集：単なる例でしたが、cssを含むcss：

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
        }
1
Patrick R

私は水平ナビゲーションでこれと同じ問題を抱えていたので、実際にはより簡単な修正を見つけました。

他の回答のようなコードを追加するのではなく、CSSで異なるリストを作成するだけです。繰り返す中央の画像は、最初または2番目ではなく、最後にリストする必要があります。

私のコードでは次のようになります：

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
1
user2585434

私が見る唯一の（実用的で、髪を脅さない）方法は、innerHeightと3つの画像に合うサイズのキャンバスで、ページがロードされ、サイズが変更されたときにJavascriptでそれを行うことです：最初の画像を1回描画します上部で、キャンバスの残りをカバーするのに必要な回数だけ2番目を描画し、キャンバスの下部で3番目を描画します。途方もなく負のZインデックスを使用して、キャンバスを0,0に配置します。

私は3つの画像（643 x 12、100および12）でそれを試しましたが、もちろん私が見た最初の問題は、3番目の画像が2番目の画像の最後の反復の一部の上に描画されることです-ウィンドウがない場合正確に12 + 12 +（p2.height * X）の高さであれば、いくらか重複します。しかし、それは予想されることですよね？

0
dda

次の場合、これに対処するための根本的で効果的な方法：

  1. 「:before」に重ならない背景を適用したい
  2. 既知の最大高としての「:before」要素
&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}
0
Kevin Struillou

これは、Top、Middleのそれぞれに3つのdivを使用する方法です、およびBottomWebページに適用する透明な画像。

背景の壁紙はオプションです。

最新のブラウザでテストされ、IE8に対応しています。

このメソッドを使用すると、body要素を処理する必要があります。つまり、Webページマークアップはnotラッパーまたは要素を含む必要があります。

jsFiddleの例
jsFiddle Example with centered filled

上記の例では、TopおよびBottom画像に透明度のない画像プレースホルダーコンテンツを使用しているため、繰り返しモードでミニ透明アイコンを使用するこのjsFiddleで、マークアップが透明度で動作することを確認できます [〜＃〜] here [〜＃ 〜] 。

0
arttronics

2つの引数でbackgroud-positionを使用するには、拡張書き込みbackgroud-position-xおよびbackgroud-position-yで書き込む必要があります

background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
0
WantToDo

z-indexはCHILD要素にのみ影響するため、z-indexはこれを修正すると思います。つまり、z-indexを使用するページで他のものを台無しにすることはできません。

上下の画像z-index:3;

中央の画像z-index:2;background-repeat:repeat-y;

0
jay