39

幅643pxの背景画像が3つあります。私はそれらをそのように設定してほしい：

  • 上の画像（高さ12px）繰り返しなし

  • 真ん中の画像の繰り返し-y

  • 下の画像（高さ12px）繰り返しなし

重ならないようにできないようですが（画像が部分的に透明になっているので問題です）、このようなことは可能ですか？

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;
4

9 に答える 9

51

あなたの問題は、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配置し、コンテナーの下部に配置された疑似要素を使用して下部の背景を配置できます。

于 2012-05-12T18:49:09.143 に答える
6

他のブロックと重ならないように配置したい背景に等しいパディング/ボーダーをブロックに追加できる場合は、background-clip＆background-originを使用して、パディング/ボーダーの上に上下の背景を配置し、コンテンツ/パディングの上に繰り返し背景を配置できます+コンテンツ。

次に例を示します：http：//dabblet.com/gist/2668803

コードの場合、次のようなものを追加する必要があります。

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のような疑似要素が完全に機能します。

于 2012-05-12T20:41:55.177 に答える
4

このようにしてみてください：

 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;
        }
于 2012-05-02T16:09:21.700 に答える
1

水平方向のナビゲーションでも同じ問題が発生していたため、実際にはもっと簡単な修正を見つけました。

他の回答のようにコードを追加するのではなく、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;
于 2014-03-27T20:24:20.390 に答える
1

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

  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;
}
于 2017-08-10T12:08:41.983 に答える
0

私が見る唯一の（実用的で、髪を脅かさない）方法は、Javascriptで、ページが読み込まれたとき、およびページのサイズが変更されたときに、innerHeightと3つの画像に合うサイズのキャンバスでそれを行うことです：最初の画像を1回描画します上部に、キャンバスの残りの部分をカバーするために必要な回数だけ2番目を描画し、キャンバスの下部に3番目を描画します。ばかばかしいほど負のz-indexでキャンバスを0,0に配置します。

私は3つの画像（643 x 12、100、12）を試してみましたが、もちろん最初に見た問題は、ウィンドウがない限り、3番目の画像が2番目の画像の最後の反復の一部に描画されることです。正確に12+12 +（p2.height * X）の高さでは、いくつかのオーバーラップがあります。しかし、それは予想されることですよね？

于 2012-05-19T16:03:09.627 に答える
0

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

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

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

このメソッドを使用すると、body要素を処理する必要があるとおりに処理できます。つまり、Webページのマークアップをラッパーまたは包含要素に含める必要はありません。

jsFiddleの例
中央に塗りつぶされたjsFiddleの例

上記の例では、上部と下部の画像に透明度のない画像プレースホルダーコンテンツを使用しているため、ここで繰り返しモードでミニ透明アイコンを使用するこのjsFiddleを使用して、マークアップが透明度で機能することを確認できます。

于 2012-05-17T23:31:55.037 に答える
0

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

上部と下部の画像z-index:3;

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

于 2013-12-31T01:36:41.517 に答える
0

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

background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
于 2019-01-09T11:56:16.690 に答える