CSS-Hintergrundwiederholung

CSS background-repeat

Standardmäßig,background-image Das Attribut wiederholt das Bild in horizontaler und vertikaler Richtung.

Einige Bilder eignen sich nur für die Wiederholung in horizontaler oder vertikaler Richtung, andernfalls sehen sie seltsam aus, wie folgt:

Beispiel

body {
  background-image: url("gradient_bg.png");
}

Probieren Sie es selbst aus

Wenn das obige Bild nur horizontal wiederholt wird (background-repeat: repeat-x;)，dann wird der Hintergrund besser aussehen:

Beispiel

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Probieren Sie es selbst aus

Hinweis:Wenn Sie das Bild vertikal wiederholen möchten, stellen Sie bitte background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat Die Eigenschaft kann auch verwendet werden, um zu bestimmen, dass das Hintergrundbild nur einmal angezeigt wird:

Beispiel

Das Hintergrundbild wird nur einmal angezeigt:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

Probieren Sie es selbst aus

Im obigen Beispiel werden das Hintergrundbild und der Text an derselben Position positioniert. Wir möchten die Position des Bildes ändern, um zu verhindern, dass das Bild den Text zu stark stört.

CSS background-position

background-position Die Eigenschaft wird verwendet, um den Ort des Hintergrundbildes zu bestimmen.

Beispiel

Legen Sie das Hintergrundbild in den rechten oberen Ecke ab:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Probieren Sie es selbst aus