So verwenden Sie CSS, damit sich das Hintergrundbild nicht wiederholt

Beim Webdesign kann die Verwendung von Hintergrundbildern die Seite verschönern, den Rhythmus des Schreibens beeinflussen, die Atmosphäre der Webseite schaffen usw. Allerdings sind die Muster einiger Hintergrundbilder klein und erscheinen beim Kacheln wiederholt, was sich auf das Erscheinungsbild und das Leseerlebnis auswirkt. In diesem Artikel wird erläutert, wie Sie mit CSS den Effekt sich nicht wiederholender Hintergrundbilder erzielen.

1. Verwenden Sie das Attribut „Hintergrundgröße“ (Hintergrundgröße).

Verwenden Sie das Attribut „Hintergrundgröße“, um die Größe des Hintergrundbilds so zu ändern, dass es zur Größe des aktuellen Elements passt . Wenn das Hintergrundbild gekachelt ist, kann dieses Attribut auch dazu beitragen, den Effekt sich nicht wiederholender Hintergrundbilder zu erzielen.

Wir können den Wert des Attributs „Hintergrundgröße“ auf „Auto 100 %“ setzen. Auf diese Weise kachelt das CSS das Hintergrundbild horizontal, ohne es vertikal zu wiederholen. Zum Beispiel:

div{
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

In diesem Beispiel wird das Hintergrundbild des div-Elements horizontal gekachelt, ohne sich vertikal zu wiederholen.

2. Verwenden Sie das Hintergrundanhangsattribut „background-attachment“

Eine andere Möglichkeit, sich nicht wiederholende Hintergrundbilder zu erzielen, ist die Verwendung des Attributs „background-attachment“. Diese Eigenschaft gibt an, ob das Hintergrundbild relativ zum Ansichtsfenster oder zum enthaltenden Element positioniert wird.

Wir setzen den Wert des Attributs „background-attachment“ auf „fixed“. Auf diese Weise fixiert das CSS das Hintergrundbild im Fenster, sodass sich das Hintergrundbild nicht bewegt, wenn der Benutzer auf der Seite scrollt. Zum Beispiel:

div{
  background-image: url(bg.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
}

In diesem Beispiel scrollt das Hintergrundbild des div-Elements mit der Seite und bewegt sich nicht relativ zum div-Element, auf dem es angezeigt wird. Dadurch wird sichergestellt, dass sich das Hintergrundbild nicht wiederholt.

3. Verwenden Sie das Hintergrundursprungsattribut

Wenn Sie das Hintergrundbild auf einen Rand des Elements statt auf das gesamte Element beschränken möchten, können Sie das verwenden Hintergrund-Origin-Attribut. Angenommen, Sie möchten beispielsweise ein Hintergrundbild auf die obere linke Ecke eines Containers beschränken, können Sie das folgende CSS verwenden:

div{
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: border-box;
  padding: 50px;
}

In diesem Beispiel wird nur das Hintergrundbild des div-Elements angezeigt innerhalb des Randbereichs des Containers (d. h. einem Bereich 50 Pixel vom Rand entfernt), ohne die Grenzgrenze zu überschreiten.

Zusammenfassend lässt sich sagen, dass die Verwendung der oben genannten drei CSS-Eigenschaften leicht den Effekt sich nicht wiederholender Hintergrundbilder erzielen kann. Unabhängig davon, ob Sie visuelle Schönheit erzielen oder das Leseerlebnis des Benutzers verbessern möchten, ist es sehr wichtig, diesen Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, damit sich das Hintergrundbild nicht wiederholt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!