So legen Sie Bildkacheln in CSS fest

CSS ist die Abkürzung für Cascading Style Sheets, die zur Steuerung des Stils von Webseiten verwendet wird, einschließlich Text, Schriftarten, Farben, Abstände, Rahmen, Hintergründe usw. Bei der Gestaltung von Webseiten werden Hintergrundbilder häufig zur Dekoration und Verschönerung verwendet. Manchmal müssen diese Hintergrundbilder gekachelt werden, um sie besser an die Größe und Auflösung der Seite anzupassen. In diesem Artikel erfahren Sie, wie Sie Bildkacheln mit CSS einrichten.

In CSS gibt es drei Möglichkeiten, Bildkacheln festzulegen, nämlich: wiederholen (repeat), horizontale Wiederholung (repeat-x) und vertikale Wiederholung (repeat-y). Im Folgenden stellen wir die Verwendung dieser Methoden im Detail vor.

1. Repeat

Repeat ist die am häufigsten verwendete Bildkachelmethode in CSS, wenn die Größe des Hintergrundbilds auf kleiner eingestellt ist als Bei der Behältergröße erscheint das Bild wiederholt, bis der Behälter gefüllt ist. Die Syntax für die Wiederholung lautet wie folgt:

background-repeat: repeat;

Die Verwendung dieser Methode ist sehr einfach. Fügen Sie einfach „repeat“ nach dem Hintergrundattribut im CSS-Stylesheet hinzu. Wie unten gezeigt:

Hintergrund: url(images/bg.jpg) wiederholen;

Auf diese Weise wird das Hintergrundbild auf der Seite wiederholt, bis es den gesamten Container ausfüllt.

2. Horizontale Wiederholung (repeat-x)

Horizontale Wiederholung bedeutet, dass sich das Hintergrundbild horizontal und nicht vertikal wiederholt. Wenn die Breite des Containers größer als das Hintergrundbild ist, wird das Bild horizontal gekachelt, bis es den gesamten Container ausfüllt, ohne dass es sich vertikal wiederholt. Die Syntax der horizontalen Wiederholung lautet wie folgt:

Hintergrundwiederholung: Wiederholung-x;

Im Vergleich zur Wiederholung müssen Sie Wiederholung in der Syntax nur durch Wiederholung-x ersetzen . Wie unten gezeigt:

background: url(images/bg.jpg) repeat-x;

Auf diese Weise wird das Hintergrundbild horizontal auf der Seite gekachelt, bis es ausfüllt den gesamten Container, ohne sich vertikal zu wiederholen.

3. Vertikale Wiederholung (repeat-y)

Vertikale Wiederholung bedeutet, dass sich das Hintergrundbild in vertikaler Richtung wiederholt und nicht in horizontaler Richtung Richtung. Wenn die Höhe des Containers größer als das Hintergrundbild ist, wird das Bild vertikal gekachelt, bis es den gesamten Container ausfüllt, und wird in horizontaler Richtung nicht wiederholt. Die Syntax für die vertikale Wiederholung lautet wie folgt:

Hintergrundwiederholung: Wiederholung-y;

Im Vergleich zur Wiederholung müssen Sie in der Syntax nur Wiederholung durch Wiederholung-y ersetzen . , wie unten gezeigt:

background: url(images/bg.jpg) repeat-y;

Auf diese Weise wird das Hintergrundbild vertikal auf der Seite gekachelt, bis es erscheint Füllt den gesamten Seitencontainer aus, ohne sich im Querformat zu wiederholen.

Zusammenfassung:

Die oben genannten sind die drei Möglichkeiten, Hintergrundbildkacheln in CSS festzulegen, nämlich Wiederholung (repeat), horizontale Wiederholung (repeat-x) und vertikale Wiederholung (repeat). -y). In bestimmten Anwendungen können je nach tatsächlichem Bedarf unterschiedliche Methoden ausgewählt werden. Achten Sie gleichzeitig darauf, die Bildgröße zu kontrollieren, um Bildverzerrungen oder Größeninkompatibilitäten zu vermeiden.

Das obige ist der detaillierte Inhalt vonSo legen Sie Bildkacheln in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!