Capas de imágenes en CSS: ¿es posible colocar 2 imágenes en el mismo elemento?

Question

suponiendo que yo estoy una imagen de fondo para una página web poniendo en CSS como esto:

body { 
font-size: 62.5%; /* Resets 1em to 10px */ 
font-family: Verdana, Arial, Sans-Serif; 
background-color: #9D5922; 
color: #000; 
margin-left: auto; 
margin-right: auto; 
margin: 0; 
padding: 0; 
background: url(images/desk.gif) repeat bottom left; 
} 

¿Hay alguna forma a la capa una segunda imagen en la parte superior de la desk.gif dentro del elemento del cuerpo en sí, o es la única forma de crear una clase separada y usar el eje z?

Lo siento, es una pregunta simple, pero he estado tratando de resolver esto y aunque no he podido hacerlo funcionar, tampoco he encontrado una idea clara en ningún lugar en línea. Entonces, ¿hay alguna manera, o esto es solo un no se puede hacer?

Gracias!

Answer 1

En resumen, no es posible. Puede hacer esto, pero necesita agregar un segundo objeto HTML a la página para que funcione. Entonces, por ejemplo, coloque un bloque div justo debajo de su cuerpo, y asigne el segundo fondo a ese objeto.

Espero que esto ayude!

Answer 2

La única forma es utilizar otro contenedor. Cada elemento puede contener solo una imagen de fondo.

Answer 3

Utilice la posición absoluta y un índice Z para obtener el segundo elemento en la parte superior.

Answer 4

No olvide que puede aplicar estilos al elemento HTML:

html { 
background: url(images/whatever.gif); 
} 

Answer 5

fondos en capas son parte de la CSS3 Working Draft pero, hasta donde yo sé, el apoyo para ellos se limita a WebKit/KHTML basan- navegadores como Safari, Chrome, Konqueror y OmniWeb.

Usando el código de ejemplo, este sería el resultado:

body { 
    font-size: 62.5%; /* Resets 1em to 10px */ 
    font-family: Verdana, Arial, Sans-Serif; 
    background-color: #9D5922; 
    color: #000; 
    margin-left: auto; 
    margin-right: auto; 
    margin: 0; 
    padding: 0; 
    background: url("images/top.gif") left bottom repeat, 
       url("images/desk.gif") left bottom repeat; 
} 

Answer 6

yo ya he publicado la solución en una pregunta duplicado, pero para cualquiera que pueda requerir esta información voy a publicar aquí también.

Por lo que yo sé, no es posible ponerlo en la misma capa, pero es posible poner varias imágenes en divisiones separadas una encima de la otra, y ha sido implementado por el popular sitio web de pruebas de usabilidad Silverback (verifica el fondo para ver cómo ha sido acodado). Si miras el código fuente, puedes ver que el fondo está compuesto por varias imágenes, una encima de la otra.

Aquí está el artículo que demuestra cómo hacer el efecto se puede encontrar en Vitamin. Un concepto similar para envolver estas capas de "piel de cebolla" se puede encontrar en A List Apart.

Answer 7

link text

mencionado enlace describe mejor lo que r ... hasta

Answer 8

Hoy en día esto se puede hacer en todos los navegadores "modernos" (no < IE9, que yo sepa). Puedo confirmar que funciona en Firefox, Opera, Chrome. No hay ninguna razón para no hacerlo, siempre y cuando tenga una solución de respaldo decente para los navegadores más antiguos/IE.

Para la sintaxis se puede elegir entre

 
    background:url(..) repeat-x left top, 
      url(..) repeat-x left bottom; 

y

 
    background-image:url(..), url(..); 
    background-position:left top, left bottom; 
    background-repeat:repeat-x; 

No es necesario los saltos de línea, pero la coma es importante.

---

¡Atención! Lo siguiente creará dos fondos, a pesar de que ha especificado sólo una URL de la imagen:

 
    background-image:url(..); 
    background-position:top, bottom; 

---

Y, por supuesto, existe la alternativa de utilizar contenedores anidados, pero esto va a hinchar su html.

Answer 9

siguiente estos enlace de capas en la capa en CSS

http://www.handycss.com/tips/layers-on-layer-in-css/