Pengulangan Latar Belakang CSS

CSS latar belakang-petik

Secara lalai,latar-imej Atribut mengulangi imej di arah horizontal dan vertikal.

Beberapa imej hanya sepadan untuk diulangi secara horizontal atau vertikal, jika tidak mereka akan terlihat ganjil, seperti yang ditunjukkan di bawah:

实例

body {
  latar-imej: url("gradient_bg.png");
}

亲自试一试

Jika imej di atas hanya diulangi secara horizontal (latar belakang-petik: ulang-ulang-x;) maka latar belakang akan terlihat lebih baik:

实例

body {
  latar-imej: url("gradient_bg.png");
  latar belakang-petik: ulang-ulang-x;
}

亲自试一试

Petunjuk:Untuk mengulangi imej secara vertikal, silakan atur latar belakang-petik: ulang-ulang-y;。

CSS latar belakang-petik: tanpa-ulang-ulang

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;
}

亲自试一试