2

1 つの div のみを使用して 2 つ以上の画像をオーバーレイ/オーバーラップする方法はありますか? CSSで次のようなものが欲しかった：

#nice_container {
    background: url('nice_background.jpg') repeat-y z(0);
    background: url('nice_logo.jpg') top left no-repeat z(1);
}

z(#) が z-index の場合、nice を使用します。<div id="nice_container">...</div>

編集

素早い回答ありがとうございます。これが解決策です。

4

7 に答える 7

2

css3 を使用すると、css で複数の背景を使用できます

http://www.css3.info/preview/multiple-backgrounds/

しかし、すべてのブラウザがそれを処理できるわけではありません! Firefox はバージョン 3.6 (Gecko 1.9.2) から、Safari はバージョン 1.3 から、Chrome はバージョン 10 から、Opera はバージョン 10.50 (Presto 2.5) から、Internet Explorer はバージョン 9.0 から複数の背景をサポートしています。

例:

#exampleA {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

また：

#exampleA {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-   repeat, url(old_paper.jpg) left top no-repeat;
}

背景画像を定義する順序は、スタックの順序であると思います

于 2012-04-11T09:32:50.863 に答える
1

次のようにCSS3乗算バックグラウンド書き込みを使用できます。

background: url('nice_background.jpg') repeat-y , background: url('nice_logo.jpg') top left no-repeat;

ただし、IE8以下では動作しません。

これを確認してくださいhttp://www.sitepoint.com/mastering-css3-multiple-backgrounds/#fbid=Mg9Q6GSmvXB

于 2012-04-11T09:33:29.493 に答える
1

css3のみが複数の背景をサポートしているため、必要なブラウザのサポートによって異なります

http://www.css3.info/preview/multiple-backgrounds/

Firefoxは、バージョン3.6（Gecko 1.9.2）以降、Safariはバージョン1.3以降、Chromeはバージョン10以降、Operaはバージョン10.50（Presto 2.5）以降、InternetExplorerはバージョン9.0以降で複数のバックグラウンドをサポートしています。

于 2012-04-11T09:34:28.070 に答える
1

迅速な回答をありがとうございました！それはこのように動作します：

 #nice_container {
     background: url('nice_logo.jpg') top left no-repeat,
                 url('nice_background.jpg') repeat-y
 }

最初に小さいまたは透明な背景画像を書き込む必要があることに注意してください（最後の背景は行の終わりに留まります）。解決策に到達するのを手伝ってくれてありがとう！

于 2012-04-12T00:34:14.960 に答える
0

これは道を示すかもしれません

div.test {
    background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
    background-repeat: repeat-y;
    background-position: top left, top right;
    width: 385px;
    height: 100px;
    border: 1px solid #000000;
}
于 2012-04-11T09:35:08.340 に答える
0

2つの画像をオーバーレイし、それをすべてのブラウザで機能させたい場合は、次のようにすることができます（ただし、divではなくなりました）。

<img src="img1.png" style="background-image: url(img2.png)"/>
于 2012-04-11T09:35:16.560 に答える
0

CSS3を使用すると、単純なコンマ区切りのリストだけを使用して、1つのdivで複数の背景画像を指定できます。

#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

詳細については、こちらをご覧ください。 * CSS3を使用した複数の背景*

于 2012-04-11T11:51:15.883 に答える