Posso impostare due immagini di sfondo sullo stesso elemento con i CSS?

Question

Codice HTML di esempio:

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

Esempio file CSS:

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

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

Sembra che la parte "b" viene ignorato.

C'è un modo per includere entrambe le immagini nella stessa cella, anche utilizzando altre tecniche?

Answer 1

Si potrebbe fare questo:

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

Poi il td avrà il primo fondo, e il div al suo interno avrà la seconda. Se uno è trasparente, l'altro lo mostrerà. Penso che lo b.png sarà al top, ma non ne sono sicuro.

Answer 2

Non è possibile avere entrambe le immagini come immagine bg per una cella. È necessario creare 2 celle o inserire le immagini come tag <img ... /> all'interno della cella. Inoltre alcuni brower hanno problemi nella lettura di class = "a b c" definizioni di classe.

Answer 3

No, ogni dichiarazione di background-image sostituirà/sovrascriverà quella precedente per un dato elemento. Dovrai nidificare un elemento per ogni ulteriore sfondo che desideri applicare. Se stai provando ad applicare un bordo di fantasia a un elemento, ci sono alcune nuove proprietà del bordo in CSS3, ma non sono ampiamente supportate.

Answer 4

qualcosa di simile potrebbe funzionare:

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

e css:

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

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

impostare il div sufficientemente ampia e vedrete un'immagine galleggianti in alto a sinistra e l'altro nel in alto a destra

Answer 5

È un'idea intrigante, ma pensa a come funzionano le altre proprietà, come il colore.

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

Come potrebbe il testo essere sia rosso e blu? In questo caso, il blu vince il tie-breaker, perché è specificato in seguito.

Potrebbe esserci un altro modo, se è possibile creare un'immagine ab.png che è il risultato della combinazione di a.png e b.png.

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

Avvertenza: non funziona in IE6.

Answer 6

Ora puoi fare con 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; 
}