¿Puedo establecer dos imágenes de fondo en el mismo elemento con CSS?

Question

Muestra código HTML:

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

Muestra archivo CSS:

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

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

Parece que la parte "b" se ignora.

¿Hay alguna manera de incluir ambas imágenes en la misma celda, incluso utilizando otra técnica?

Answer 1

Usted puede hacer esto:

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

Entonces el td tendrá el primer plano y el div su interior tendrá la segunda. Si uno es transparente, el otro se mostrará. Creo que b.png estará arriba, pero no estoy seguro de eso.

Answer 2

No puede tener ambas imágenes como una imagen bg para una celda. Debe crear 2 celdas o colocar las imágenes como etiquetas <img ... /> dentro de la celda. Además, algunos navegadores tienen problemas para leer las definiciones de clases class = "a b c".

Answer 3

No, cada declaración de imagen de fondo reemplazará/anulará la anterior para un elemento dado. Deberá anidar un elemento por cada fondo adicional que desee aplicar. Si está intentando aplicar un borde elegante a un elemento, existen algunas propiedades de borde nuevas en CSS3, pero no son ampliamente compatibles.

Answer 4

algo como esto podría funcionar:

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

y el css:

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

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

establezca la div suficientemente ancho y verá una imagen que flota en la parte superior izquierda y el otro en el arriba a la derecha

Answer 5

Es una idea intrigante, pero piense cómo funcionan otras propiedades, como el color.

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

¿Cómo puede ser tanto el texto rojo y azul ? En este caso, azul gana el desempate, porque se especifica más adelante.

Puede haber otra manera, si puede crear una imagen ab.png que es el resultado de la combinación de a.png y b.png.

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

Advertencia: No funciona en IE6.

Answer 6

Ahora puede hacerlo 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; 
}