Ripetizione di Sfondo CSS

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应仅适合水平或垂直方向重复，否则它们看起来会很奇怪，如下所示：

Esempio

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

Prova personalmente

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

Esempio

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

Prova personalmente

提示：如果需要垂直重复图像，请设置 background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat L'attributo può anche specificare di visualizzare l'immagine di sfondo una sola volta:

Esempio

Visualizzazione dell'immagine di sfondo una sola volta:

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

Prova personalmente

Nel esempio precedente, l'immagine di sfondo è posizionata nello stesso punto del testo. Vogliamo cambiare la posizione dell'immagine per evitare che l'immagine interferisca troppo con il testo.

background-position CSS

background-position L'attributo specifica la posizione dell'immagine di sfondo.

Esempio

Metti l'immagine di sfondo nell'angolo in alto a destra:

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

Prova personalmente