Stacking Order of Multiple Backgrounds

Mehrere Hintergrundbilder sind ein cooles Feature von CSS3. Die Syntax ist einfach, man trennt sie einfach durch Kommas. Ich finde es am einfachsten/besten, die background-Kurzschreibweise zu verwenden, damit man Position und Wiederholung usw. deklarieren und alles zusammenfassen kann. Was bei der Syntax nicht offensichtlich ist, ist, welches Bild in der vertikalen Stapelreihenfolge oben liegt, wenn sich diese Bilder überlappen. Der Standard ist diesbezüglich eindeutig und die Browserimplementierungen folgen ihm. Das erste ist oben und von dort geht es abwärts.

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 ist wie z-index, aber das ist kein z-index, es sind Teile eines einzigen Elements.

Ich finde es etwas verwirrend, da es das Gegenteil davon ist, wie HTML natürlich funktioniert. Wenn alle Elemente den gleichen z-index haben (und auf eine bestimmte Weise positioniert sind und sich überlappen), liegt das letzte Element oben und nicht das erste. Keine große Sache, man muss es nur einmal lernen.

Das Wichtigste, was man sich merken sollte, ist, dass wenn man einen der Hintergründe für ein vollständig opakes / vollständig wiederholendes Bild verwenden würde, diesen nicht zuerst, sondern zuletzt auflisten sollte, sonst bedeckt er alle anderen.

Denken Sie auch daran, dass multiple Hintergründe zwar absolut revolutionär sind, die Fallback-Lösung für Browser, die diese nicht unterstützen, darin besteht, dass sie überhaupt nichts für den Hintergrund anzeigen. Seien Sie also vorsichtig. Der beste Weg, damit umzugehen, ist wie immer Modernizr. Sie verwenden es sogar als Demo direkt auf der Startseite ihrer Website (zur Klarheit angepasst).

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

Heutzutage (Update Mai 2019) würde ich mir darüber wahrscheinlich keine Sorgen mehr machen, da die Browserunterstützung dafür extrem hoch ist. Außerdem könnte man es in CSS so machen:

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