CSSで同じ要素に2つの背景イメージを設定できますか？

Question

サンプルHTMLコード：

<table> 
<tr> 
<td class="a b"> 

サンプルCSSファイル：

.a 
{ 
    background-image:url(a.png); 
} 

.b 
{ 
    background-image:url(b.png); 
} 

"B" の部分が無視されるようです。

他の手法を使用していても、両方の画像を同じセルに埋め込む方法はありますか？

<td class="a"><div class="b">...</div></td> 

はその後 tdは、第1の背景を持つことになり、そしてその中 divは、第二を持っています：

Answer 1

あなたはこれを行うことができます。一方が透明ならば、もう一方は透けて見えるでしょう。私はb.pngが上になると思うが、それについてはわからない。

Answer 2

両方の画像をセルのbg画像として使用することはできません。あなたは2セルを作るか、または画像をセルの中に<img ... />タグとして置く必要があります。また、いくつかのブラウザーには、class = "a b c"クラス定義を読むことに問題があります。

Answer 3

いいえ、すべての背景画像の宣言は、指定された要素の前の画像を置き換えたり上書きしたりしません。あなたは、適用したい追加のバックグラウンドごとに要素を入れ子にする必要があります。派手なボーダーを要素に適用しようとすると、CSS3に新しいボーダープロパティがいくつかありますが、広くサポートされていません。

<table> 
<tr> 
    <td class="a"> 
    <div class="b"> 

とCSS：

Answer 4

このような何かは仕事ができる

.a 
{ 
    background: url(a.png) top left no-repeat; 
} 

.b 
{ 
    background: url(b.png) top right no-repeat; 
} 

が十分に広いのdivを設定すると、あなたは一つの画像は左上との他に浮かんで表示されます右上

Answer 5

これは興味深い考えですが、色など他のプロパティの仕組みについて考えてください。

.a { color: red; } 
.b { color: blue; } 

どのようにテキストが両方赤と青だろうか？この場合、後で指定されるので、ブルーはタイブレーカーを獲得します。

a.pngとb.pngを組み合わせた結果の画像ab.pngを作成できる場合は、別の方法があります。

.a { background-image(a.png) } 
.b { background-image(b.png) } 
.a.b { background-image(ab.png) } 

注意：IE6では動作しません。

Answer 6

これで、CSS3を使用できます。 http://www.zenelements.com/blog/css3-background-images/

#my_CSS3_id { 
background: url(image_1.extention) top left no-repeat, 
url(image_2.extention) bottom left no-repeat, 
url(image_3.extention) bottom right no-repeat; 
}