So stellen Sie den Hintergrund so ein, dass er sich in CSS nicht wiederholt

Im Webdesign sind Hintergrundbilder ein sehr wichtiges Element, das Webseiten schöner machen kann. Wenn Ihr Hintergrundbild jedoch mehrmals hintereinander auf einer Webseite erscheint, kann die Seite äußerst eintönig und eintönig wirken. Deshalb müssen wir bei der Verwendung von Hintergrundbildern darauf achten, wie wir verhindern können, dass diese auf der Webseite wiederkehren.

Eine der einfachsten Möglichkeiten ist die Verwendung der Eigenschaft „background-repeat“ in CSS. Diese Eigenschaft steuert, wie das Hintergrundbild auf der Webseite wiederholt wird. Für „background-repeat“ sind vier Werte verfügbar: „repeat“ (Standard), „repeat-x“, „repeat-y“ und „no-repeat“. Unter diesen bedeutet „Wiederholung“, dass sich das Hintergrundbild sowohl in horizontaler als auch in vertikaler Richtung wiederholt. „Wiederholung“ bedeutet, dass sich das Hintergrundbild nur in horizontaler Richtung wiederholt, nicht in vertikaler Richtung die vertikale Richtung erscheint nicht in der horizontalen Richtung; keine Wiederholung bedeutet, dass das Hintergrundbild nicht wiederholt erscheint.

Um beispielsweise zu verhindern, dass sich das Hintergrundbild horizontal und vertikal wiederholt, können Sie den folgenden Code verwenden:

background-repeat: no-repeat;

Aber diese Methode hat eine Einschränkung: Wenn Ihr Hintergrundbild zu klein ist, um die gesamte Webseite auszufüllen, dann dieses Die Methode führt dazu, dass nur ein kleiner Teil des Hintergrundbilds auf der Webseite angezeigt wird und viel Leerraum auf der Webseite verbleibt. Um dieses Problem zu lösen, müssen wir das Hintergrundpositionierungsattribut „background-position“ verwenden.

Das Attribut „Hintergrundposition“ kann uns dabei helfen, das Hintergrundbild an einer beliebigen Stelle auf der Webseite zu platzieren. Es akzeptiert zwei Werte, der erste Wert ist die horizontale Position und der zweite Wert ist die vertikale Position. Wenn Sie beispielsweise möchten, dass das Hintergrundbild in der oberen linken Ecke angezeigt wird, können Sie so schreiben:

background-position: left top;

Wenn Sie möchten, dass das Hintergrundbild in der unteren rechten Ecke angezeigt wird, können Sie so schreiben:

background-position: right bottom;

Wenn Sie möchten, dass das Hintergrundbild die gesamte Webseite ausfüllt, können Sie so schreiben:

background-position: center center;

Einige Webdesigner verwenden eine komplexere Methode, um zu verhindern, dass sich das Hintergrundbild wiederholt, nämlich durch die Implementierung mehrerer Hintergründe von CSS3 . Mit mehreren Hintergründen können Sie mehrere Hintergrundbilder für dasselbe Element verwenden, um einen Effekt wie „sich nicht wiederholende Hintergründe“ zu erzielen.

Um mehrere Hintergründe zu verwenden, müssen Sie das Hintergrundbild-Attribut von CSS3 verwenden. Es akzeptiert eine Reihe von durch Kommas getrennten Hintergrundbildern. Das Folgende ist beispielsweise ein Hintergrund, der aus drei Bildern besteht:

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");

Hier können wir die Position jedes Hintergrundbilds steuern, damit es nicht wiederholt erscheint. Mit dem folgenden Code können beispielsweise drei Hintergrundbilder die gesamte Webseite von verschiedenen Positionen aus abdecken, ohne sich zu wiederholen:

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");
background-position: left top, center center, right bottom;
background-repeat: no-repeat;

Durch die Verwendung mehrerer Hintergründe können wir komplexere Hintergrunddesigns erzielen, wodurch die Webseite vielschichtiger und dreidimensionaler wird fühlen.

Kurz gesagt: Wie verhindert werden kann, dass das Hintergrundbild wiederkehrt, hängt davon ab, ob der Webdesigner verschiedene CSS-Attribute geschickt einsetzen kann. Wir können einfache Hintergrundwiederholungsattribute, Hintergrundpositionierungsattribute und komplexere Methoden mit mehreren Hintergründen verwenden, um dem Hintergrundbild den besten Effekt auf der Webseite zu verleihen und so die Schönheit und Benutzererfahrung der Webseite zu verbessern.

Das obige ist der detaillierte Inhalt vonSo stellen Sie den Hintergrund so ein, dass er sich in CSS nicht wiederholt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!