Verwendung von mehreren Hintergründen
Sie können mehrere Hintergründe auf Elemente anwenden. Diese werden übereinander geschichtet, wobei der erste angegebene Hintergrund oben liegt und der zuletzt angegebene Hintergrund im Hintergrund liegt. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.
Das Definieren mehrerer Hintergründe ist einfach:
.myclass {
background:
background1,
background2,
/* …, */ backgroundN;
}
Sie können dies sowohl mit der Kurzform-Eigenschaft background
als auch mit den individuellen Eigenschaften tun, mit Ausnahme von background-color
. Das bedeutet, dass die folgenden Hintergrundeigenschaften als Liste angegeben werden können, eine pro Hintergrund: background
, background-attachment
, background-clip
, background-image
, background-origin
, background-position
, background-repeat
, background-size
.
Beispiel
In diesem Beispiel werden drei Hintergründe übereinandergestapelt: das Firefox-Logo, ein Bild mit Blasen und ein lineares Farbverlauf:
HTML
<div class="multi-bg-example"></div>
CSS
.multi-bg-example {
width: 100%;
height: 400px;
background-image:
url(firefox.png), url(bubbles.png),
linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
left,
right;
}
Ergebnis
Wie Sie hier sehen können, befindet sich das Firefox-Logo (das zuerst innerhalb von background-image
aufgeführt wurde) oben, direkt über der Grafik mit den Blasen. Darunter folgt der Farbverlauf (zuletzt aufgeführt), der sich unterhalb aller vorhergehenden 'Bilder' befindet. Jede nachfolgende Untereigenschaft (background-repeat
und background-position
) wird auf die entsprechenden Hintergründe angewendet. Das bedeutet, dass der zuerst angegebene Wert für background-repeat
auf den ersten (vordersten) Hintergrund angewendet wird und so weiter.