Welche Möglichkeiten gibt es, das Hintergrundbild eines Webdokuments zu wiederholen?

Die Möglichkeiten, das Hintergrundbild eines Webdokuments zu wiederholen, sind: 1. Keine Wiederholung, keine Wiederholung; 2. Das Hintergrundbild wird vertikal und horizontal wiederholt, wiederholen, 3. Horizontal wiederholen, wiederholen-x; und horizontal, wiederholen- y.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Zu den Wiederholungsmethoden des Hintergrundbilds gehören „keine Wiederholung“, „Wiederholung“, „horizontale Wiederholung“ und „vertikale und horizontale Wiederholung“.

Syntax

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;

Am häufigsten werden wahrscheinlich die oben genannten verwendet. Werfen wir einen Blick auf die anderen beiden Attributwerte:

background-repeat: space;
background-repeat: round;

Standardmäßig werden wiederholte Bilder auf die Größe des Elements zugeschnitten, sie können jedoch skaliert werden (mit rund) oder gleichmäßig verteilt (mit Platzbedarf) verteilen.

rund: Wenn der zulässige Platz zunimmt, wird das wiederholte Bild gestreckt (ohne Lücken), bis genügend Platz zum Hinzufügen eines Bildes vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen Bilder komprimiert, um Platz zu schaffen.

Raum: Die Bilder werden so oft wie möglich wiederholt, aber nicht beschnitten. Das erste und das letzte Bild werden an den entsprechenden Seiten des Elements fixiert und der Leerraum wird gleichmäßig zwischen den Bildern verteilt. Das Positionsattribut wird ignoriert, es sei denn, es kann nur ein Bild ohne Zuschneiden angezeigt werden. Das Zuschneiden erfolgt nur dann, wenn das Bild zu groß ist und nicht genügend Platz für die Anzeige des gesamten Bildes vorhanden ist.

Syntax mit doppeltem Wert

background-repeat: repeat space;
background-repeat: round space;
background-repeat: no-repeat round;

Die Schreibmethode ist die gleiche wie üblich, horizontal vertikal |.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, das Hintergrundbild eines Webdokuments zu wiederholen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!