Hintergrund wiederholen in CSS

Wenn wir standardmäßig ein Hintergrundbild auf einer beliebigen Webseite festlegen. CSS bietet eine Eigenschaft im Hintergrund, um das Wiederholungsverhalten des Bildes zu verwalten.

Wir können die folgenden Funktionen mithilfe der Eigenschaft mit Hintergrund-Repeat ausführen:

• No-Repeat Vermeidet die Wiederholung des Bildes.
• Wiederholung-x Wiederholt ein Bild in horizontaler Richtung.
• Wiederholen Wiederholt ein Bild in vertikaler Richtung.
• Raum Wiederholt das Bild ohne Ausschneiden und fügte Platz zwischen jeder Wiederholung hinzu
• runden Wiederholt und streckt das Bild, ohne Platz hinzuzufügen

In diesem Artikel werden alle oben genannten Hintergrund-Property-Werte mit Beispielen erörtert.

Beispiel
Beginnen wir mit der Standardeigenschaft im Hintergrund im Hintergrund.

Der obige Snippet liefert die folgende Ausgabe:

Standardmäßig wiederholte die Eigenschaft des Hintergrundbildes das Bild sowohl horizontal als auch vertikal.

No-Repeat-Wert

Mal sehen, was passieren wird, wenn ein Wert ist "No-Repeat" wird der Hintergrund -Wiederholungseigenschaft zugewiesen:

Jetzt wird das Hintergrundbild nur einmal angezeigt. Dieses Beispiel liefert die folgende Ausgabe:

Wiederholungs-X-Wert

Jetzt lass uns zuweisen "Repeat-X" In die Eigenschaft mit Hintergrund-Wiederholungen und beachten Sie, wie es funktioniert:

Beobachten wir die Auswirkungen von „Repeat-X“ auf das Hintergrundbild in der folgenden Ausgabe:

Aus der obigen Ausgabe ist klar, dass "Repeat-X" Wiederholt das Bild nur horizontal.

Wiederholen Sie den Wert

In ähnlicher Weise weisen wir die zu Wiederholen Wert für die Eigenschaft im Hintergrund-Repeat:

Das obige Code -Stück erzeugt die folgende Ausgabe:

Der Ausgang überprüft das Wiederholen wiederholte das Bild nur vertikal.

Raumwert

Lassen Sie uns das nutzen "Raum" Wert für die Eigenschaft im Hintergrund-Wiederholung, um die gleichmäßigen Räume zwischen den Bildern hinzuzufügen:

Das obige Skript liefert die folgende Ausgabe:

Rundwert

Das Zuweisen des "runden" Werts der Eigenschaft im Hintergrund-Repeat passt dem Bild gemäß der Bildschirmgröße:

Infolgedessen erhalten wir die folgende Ausgabe:

Mehrfach Hintergrundbild Wiederholung

In CSS können mehrere Hintergrundbilder zu einem Element hinzugefügt werden, und das folgende Beispiel wird erläutert, wie das Wiederholungsverhalten mehrerer Bilder mithilfe der Hintergrund-Repeat-Eigenschaft gesteuert werden kann:

Im obigen Code benötigt die Eigenschaft von Hintergrundbild zwei URLs, um zwei Hintergrundbilder hinzuzufügen. In der nächsten Zeile gibt die Eigenschaft mit Hintergrundregelung auch zwei Werte i an i an i.e. Wiederholen Sie sich, Wiederholung, x. Wiederholt-y wiederholt das erste Bild vertikal, während Repeat-X das zweite Bild horizontal wiederholt:

Abschluss

Die Eigenschaft im Hintergrund regelt das Wiederholungsverhalten des Hintergrundbildes. Es bestimmt, ob sich ein Hintergrundbild wiederholt oder nicht, wenn ja, wie, ich.e. vertikal oder horizontal.

Diese Beschreibung lieferte einen gründlichen Überblick über die Eigenschaft von Hintergrund-Wiederholungen in CSS. Zunächst bestimmt es, welche Werte der Eigenschaft im Hintergrund-Wiederholungsvolumen zugeordnet werden können. Danach erläuterte es die Arbeit jedes Hintergrund-Repeat-Werts im Detail zusammen mit den Beispielen.