Orden de apilamiento de múltiples fondos | Programar Plus

Múltiples imágenes de fondo es una característica interesante de CSS3. La sintaxis es fácil, simplemente sepárelos con comas. Creo que es más fácil/mejor usar el background propiedad abreviada para que pueda declarar la posición y la repetición y todo eso y mantenerlos todos agrupados. Lo que no es obvio al mirar la sintaxis es qué imagen está arriba en el orden de apilamiento vertical cuando esas imágenes se superponen. La especificación es clara en este sentido y siguen las implementaciones del navegador. El primero está arriba y de ahí bajan.

background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */

Es como z-index pero esto no es z-index, son partes de un solo elemento.

Creo que es un poco confuso ya que es lo opuesto a cómo funciona HTML de forma natural. Si todos los elementos tienen el mismo índice z (y están posicionados de alguna manera y se superponen), el ultimo elemento estará en la parte superior, no el primero. Sin embargo, no es tan importante, solo necesita aprenderlo una vez.

Lo más importante que debe recordar es que si usara uno de los fondos para una imagen completamente opaca / completamente repetitiva, enumere ese último no primero, de lo contrario cubrirá todos los demás.

Recuerde también que si bien los fondos múltiples son totalmente radicales, la alternativa para los navegadores que no lo admiten es que no muestra nada en absoluto para el fondo, así que tenga cuidado allí. La mejor manera de manejarlo, como siempre, es Modernizr. Incluso lo usan como demostración en la página de inicio de su sitio (ajustado para mayor claridad):

.multiplebgs body {
  /* Use awesome multiple backgrounds here */
}
.no-multiplebgs body {
  /* laaaaaame fallback */
}

En estos días (actualización de mayo de 2019), probablemente no me preocuparía en absoluto, ya que el soporte del navegador para esto es extremadamente alto. Además, podrías hacerlo en CSS como:

@supports (background-image: url(foo.jpg), url(bar.jpg)) {
  body { } 
}