4.1 Grundprinzipien
CSS ermöglicht es, mehrere Hintergrundbilder in einem Element zu verwenden, was eine Vielzahl von Möglichkeiten
für die Erstellung komplexer und interessanter visueller Effekte eröffnet. Mit der Eigenschaft background-image und den damit verbundenen Eigenschaften
kann man mehrere Schichten von Hintergrundbildern angeben und deren Reihenfolge, Position und andere Merkmale steuern.
Syntax
Um mehrere Hintergrundbilder festzulegen, wird eine Syntax verwendet, in der die verschiedenen Bilder durch Kommas getrennt aufgelistet werden:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Eigenschaften zur Anpassung jeder Ebene
Neben background-image werden zur Anpassung jeder Schicht von Hintergrundbildern die folgenden Eigenschaften verwendet,
die ebenfalls mehrere Werte unterstützen, die durch Kommas getrennt sind:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Reihenfolge der Schichten
Die Bilder werden schichtweise in der Reihenfolge ihrer Auflistung platziert, wobei das erste Bild dem Benutzer am nächsten ist und das letzte am nächsten zum Hintergrund des Elements.
4.2 Überlagerung von Bildern
Einfache Überlagerung von Bildern.
Beispiel zur Verwendung:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg">Mehrstufiger Hintergrund</div>
</body>
Erklärung des Codes:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: definiert zwei Hintergrundbilderbackground-position: center, top left;: zentriert das erste Bild und platziert das zweite Bild in der oberen linken Eckebackground-repeat: no-repeat, no-repeat;: deaktiviert das Wiederholen beider Bilder
4.3 Verwendung mehrerer Bilder
Verwendung mehrerer Hintergrundbilder mit unterschiedlichen Größen.
Beispiel zur Verwendung:
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes">Mehrstufiger Hintergrund mit Größen</div>
</body>
Erklärung des Codes:
background-size: 50% 50%, 30% 30%;: skaliert das erste Bild auf 50% Breite und Höhe des Elements und das zweite Bild auf 30% Breite und Höhe des Elements
4.4 Transparente Bilder
Überlagerung von Bildern mit Transparenz.
Beispiel zur Verwendung:
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<body>
<div class="multi-bg-opacity">Mehrstufiger Hintergrund mit Transparenz</div>
</body>
Erklärung des Codes:
background-size: cover, 50%;: skaliert das erste Bild, um das gesamte Element zu bedecken, und das zweite Bild auf 50% der Größe des Elements::before: Pseudoelement fügt eine halbtransparente schwarze Schicht über den Hintergrundbildern hinzu
4.5 Zuschneiden des Hintergrunds
Verwendung anderer Eigenschaften mit mehreren Hintergrundbildern.
background-origin und background-clip
Diese Eigenschaften steuern den Bereich, in dem das Hintergrundbild angezeigt wird, und den Zuschneidebereich des Hintergrunds.
Beispiel zur Verwendung:
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
<body>
<div class="multi-bg-origin-clip">Mehrstufiger Hintergrund mit background-origin und background-clip</div>
</body>
Erklärung des Codes:
background-origin: padding-box, content-box;: das erste Bild beginnt am inneren Rand des Paddings, das zweite Bild am Inhalt des Elementsbackground-clip: border-box, padding-box;: das erste Bild wird entlang des äußeren Randes des Rahmens beschnitten, das zweite Bild am inneren Rand des Paddings
GO TO FULL VERSION