Dieser Studienführer zeigt, wie man Hintergrundbilder mit CSS verwendet. Fangen wir also an!
Wie verwende ich mehrere Hintergrundbilder mit CSS?
Das CSS „ Hintergrund ”-Eigenschaft ist eine abgekürzte Eigenschaft, die die Eigenschaften background, background-attach, clip, image, repeat, origin, size und position enthält. Die Hintergrundeigenschaft kann verwendet werden, um die URLs mehrerer Bilder anzugeben. Diese Bilder werden dann entsprechend positioniert und eingestellt.
Nehmen wir ein Beispiel, in dem ein div-Element nur ein Bild als Webseitenlogo enthält, während das zweite drei Bilder enthält.
Beispiel: Hinzufügen mehrerer Hintergrundbilder mit CSS
Fügen Sie in HTML ein div-Element für das Logo hinzu und geben Sie den Klassennamen an. Zum Beispiel nannten wir es „ Logo “. Das zweite div verwendet mehrere Bilder, also haben wir es „ mehrere Bilder “. Sie können den Klassennamen jedoch nach Ihren Wünschen festlegen.
HTML
< div Klasse = 'Logo' >< / div >< div Klasse = 'mehrere Bilder' >< / div >
Im nächsten Abschnitt werden wir die Bilder mithilfe der CSS-Eigenschaft background anpassen.
Stil „Logo“ div
.Logo {Breite : 100% ;
Höhe : 50px ;
Polsterung : 5px ;
Rand : 5px ;
Hintergrundgröße : 100px ;
Hintergrund Wiederholung : keine Wiederholung ;
Hintergrundbild : URL ( images/linux-logo.png ) ;
}
Das div-Element mit der Klasse „ Logo “ wird mit den folgenden Eigenschaften angewendet:
- „ Breite ”-Eigenschaft wird verwendet, um die Breite des Elements auf “ 100% “.
- „ Höhe ”-Eigenschaft wird verwendet, um die Höhe des Elements auf “ 50px “.
- „ Polsterung ”-Eigenschaft wird verwendet, um die “ 5px ” Leerzeichen um den angegebenen Inhalt des Elements.
- „ Rand ”-Eigenschaft wird verwendet, um die “ 5px ” Raum um das Element herum.
- „ Hintergrundgröße ”-Eigenschaft legt die Hintergrundbildgröße des Elements fest als “ 100px “.
- „ Hintergrund Wiederholung „mit dem Wert“ keine Wiederholung “ zeigt den Hintergrund nur einmal an.
- „ Hintergrundbild “-Eigenschaft wird verwendet, um die URL des Bildes anzugeben.
Stil „mehrere Bilder“ div
.mehrere Bilder {Breite : 90% ;
Höhe : 45vh ;
Rand : 1px Auto ;
Polsterung : 20px ;
Hintergrundgröße : 150px ;
Hintergrundfarbe : rgb ( 157 , 154 , 151 ) ;
Hintergrundbild : URL ( images/office.png ) , URL ( images/html.png ) , URL ( images/laptop.png ) ;
Hintergrund Wiederholung : keine Wiederholung , keine Wiederholung , keine Wiederholung ;
Hintergrund-Position : links , Center , Rechts ;
}
Stylen Sie nun den anderen Container wie folgt:
- „ Hintergrundfarbe ”-Eigenschaft gibt die Farbe des Hintergrunds des Elements an.
- „ Hintergrundbild ”-Eigenschaft gibt mehrere Bild-URLs an.
- „ Hintergrund Wiederholung ”-Eigenschaft legt Werte für die Bilder in einer Sequenz von Bildern fest, die in der background-image-Eigenschaft angegeben sind. Beide Bilder sind als nicht wiederholbar eingestellt, was bedeutet, dass sie nur einmal im Browser angezeigt werden.
- „ Hintergrund-Position ” passt die Bildposition in der Reihenfolge der Bilder an, die durch die Eigenschaft background-image angegeben sind. Das erste Bild wird auf der linken Seite platziert, das zweite in der Mitte und das dritte auf der rechten Seite.
Durch die Bereitstellung des oben bereitgestellten Codes sieht das Ergebnis im Browser so aus:
Auf diese Weise können wir die Position mehrerer Bilder mit CSS anpassen.
Abschluss
Um die Anwendung unterhaltsam und interaktiv zu gestalten, verwenden die Entwickler verschiedene Bilder und Farben. Wir können mehrere Bilder mit CSS-Hintergrundeigenschaften festlegen, z. B. Hintergrundposition, Hintergrundwiederholung, Hintergrundgröße und mehr. Dieses Handbuch hat die Verwendung mehrerer Hintergrundbilder mit CSS-Beispielen demonstriert.