So verwenden Sie mehrere Hintergrundbilder mit CSS

Während der Entwicklung einer Anwendung muss der Entwickler die Interaktivität der Anwendung aufrechterhalten. Es gibt mehrere Funktionen, die dazu beitragen können, die Aufmerksamkeit des Benutzers zu erregen, z. B. Farben, Bilder, GIFs und mehr. Um der Website ein Bild hinzuzufügen, html “”Tag kann verwendet werden. Während das Hinzufügen mehrerer Bilder mit CSS addiert, die “HintergrundbildEigenschaft wird mit den URLs der Bilder verwendet.

Dieser Studienhandbuch zeigt, wie Sie Hintergrundbilder mit CSS verwenden können. Also beginnen wir beginnen!

So verwenden Sie mehrere Hintergrundbilder mit CSS?

Das CSS “HintergrundEigenschaft ist eine Abkürzungseigenschaft, die Hintergrund-, Hintergrund-Atachment-, Clip-, Bild-, Wiederholungs-, Ursprungs-, Größe und Positionseigenschaften enthält. Die Hintergrundeigenschaft kann verwendet werden, um die URLs mehrerer Bilder anzugeben. Diese Bilder werden dann positioniert und entsprechend eingestellt.

Nehmen wir ein Beispiel, in dem ein Div -Element nur ein Bild als Webseiten -Logo 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 haben wir es benannt “Logo”. Das zweite Div verwendet mehrere Bilder, also haben wir es benannt. “Mehrfachbilder”. Sie können jedoch den Klassennamen gemäß Ihren Einstellungen angeben.

Html

Im nächsten Abschnitt werden wir die Bilder mithilfe der CSS -Hintergrundeigenschaft anpassen.

Stil „Logo“ div

.Logo
Breite: 100%;
Höhe: 50px;
Polsterung: 5px;
Rand: 5px;
Hintergrundgröße: 100px;
Hintergrundrepeat: No-Repeat;
Hintergrundbild: URL (Bilder/Linux-Logo.png);

Das Divelelement mit der Klasse “Logo”Wird mit den folgenden Eigenschaften angewendet:

• “Breite"Eigenschaft wird verwendet, um die Breite des Elements auf" festzulegen "100%”.
• “Höhe"Eigenschaft wird verwendet, um die Höhe des Elements auf" festzulegen "50px”.
• “PolsterungEigenschaft wird zum Festlegen der “verwendet5pxPlatz um den angegebenen Inhalt des Elements.
• “RandEigenschaft wird zum Festlegen der “verwendet5pxPlatz um das Element.
• “HintergrundgrößeDie Eigenschaft legt die Hintergrundbildgröße des Elements als "fest"100px”.
• “Hintergrund Wiederholung"Mit dem Wert"No-Repeat”Zeigt den Hintergrund nur einmal an.
• “HintergrundbildEigenschaft wird verwendet, um die URL des Bildes anzugeben.

Stil „Mehrfachbilder“ div

.Mehrfachimages
Breite: 90%;
Höhe: 45 VH;
Rand: 1PX Auto;
Polsterung: 20px;
Hintergrundgröße: 150px;
Hintergrundfarbe: RGB (157, 154, 151);
Hintergrundbild: URL (Bilder/Büro.PNG), URL (Bilder/HTML.PNG), URL (Bilder/Laptop.png);
Hintergrundrepeat: No-Repeat, No-Repeat, No-Repeat;
Hintergrundposition: links, Mitte, rechts;

Style nun den anderen Behälter wie folgt:

• “HintergrundfarbeEigenschaft gibt die Farbe des Hintergrunds des Elements an.
• “HintergrundbildEigenschaft gibt mehrere Bild -URLs an.
• “Hintergrund WiederholungDie Eigenschaft legt Werte für die Bilder in einer Sequenz der in der Eigenschaft im Hintergrund angegebenen Bilder fest. Beide Bilder werden als Nicht-Wiederholung eingestellt, was bedeutet, dass sie nur einmal im Browser angezeigt werden.
• “Hintergrundposition”Passt die Bildposition in der Abfolge der von der Eigenschaft im Hintergrund angegebenen Bilder an. Das erste Bild wird auf der linken Seite eingestellt, das zweite in der Mitte und das dritte wird auf der rechten Seite platziert.

Durch die Bereitstellung des oben bereitgestellten Codes sieht das Ergebnis des Browsers 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 Entwickler verschiedene Bilder und Farben. Wir können mehrere Bilder mit CSS-Hintergrundeigenschaften wie Hintergrundposition, Hintergrund-Repeat, Hintergrundgröße und mehr festlegen. Dieses Handbuch hat die Verwendung mehrerer Hintergrundbilder mit CSS -Beispielen gezeigt.