Powtarzanie tła CSS

CSS background-repeat

Domyślnie,background-image Atrybut powtarza obraz w kierunku poziomym i pionowym.

Niektóre obrazy powinny być powtarzane tylko w kierunku poziomym lub pionowym, w przeciwnym razie będą wyglądały dziwnie, jak pokazane poniżej:

Przykład

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

Spróbuj sam

Jeśli powyższy obraz jest powtarzany tylko w kierunku poziomym (background-repeat: repeat-x;) to tło będzie wyglądało lepiej:

Przykład

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

Spróbuj sam

Uwaga:Aby powtórzyć obraz pionowo, ustaw: background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat Atrybut może również określać, że obraz tła będzie wyświetlany tylko raz:

Przykład

Wyświetl obraz tła tylko raz:

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

Spróbuj sam

W poprzednim przykładzie, obraz tła i tekst są umieszczone w tym samym miejscu. Chcemy zmienić pozycję obrazu, aby uniknąć nadmiernego zakłócania tekstu.

CSS background-position

background-position Atrybut określa pozycję obrazu tła.

Przykład

Umieść tło obrazu w prawym górnym rogu:

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

Spróbuj sam