CSS 背景重復

CSS background-repeat

默認情況下，background-image 屬性在水平和垂直方向上都重復圖像。

某些圖像應只適合水平或垂直方向上重復，否則它們看起來會很奇怪，如下所示：

實例

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

親自試一試

如果上面的圖像僅在水平方向重復 (background-repeat: repeat-x;)，則背景看起來會更好：

實例

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

親自試一試

提示：如需垂直重復圖像，請設置 background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat 屬性還可指定只顯示一次背景圖像：

實例

背景圖像僅顯示一次：

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

親自試一試

在上例中，背景圖像與文本放置在同一位置。我們想要更改圖像的位置，以免圖像過多干擾文本。

CSS background-position

background-position 屬性用于指定背景圖像的位置。

實例

把背景圖片放在右上角：

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

親自試一試