CSS | 背景重复属性

简介

在 CSS 中，背景重复属性 (background-repeat) 用来指定背景图片的平铺方式。通常情况下，网页上的背景是以平铺的方式被显示的，这样可以让整个页面显得更为统一和连贯。

语法

background-repeat 属性的语法如下：

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

属性值

1. repeat：默认值，表示背景图片在水平和垂直方向上都进行平铺显示。
2. repeat-x：表示背景图片只在水平方向上进行平铺显示。
3. repeat-y：表示背景图片只在垂直方向上进行平铺显示。
4. no-repeat：表示背景图片不进行平铺显示。
5. initial：设置该属性为它的默认值。
6. inherit：从父元素继承该属性的值。

可以使用简写形式指定多个值，如：

background-repeat: repeat-x no-repeat;

这表示背景图片在水平方向上进行平铺显示，而在垂直方向上则不进行平铺显示。

示例

以下示例展示了不同的 background-repeat 值的效果：

.no-repeat {
  background-repeat: no-repeat;
}

.repeat-x {
  background-repeat: repeat-x;
}

.repeat-y {
  background-repeat: repeat-y;
}

.repeat {
  background-repeat: repeat;
}

<div class="no-repeat" style="background-image: url('https://images.unsplash.com/photo-1506104178254-608b2b8bece2');"></div>
<div class="repeat-x" style="background-image: url('https://images.unsplash.com/photo-1509947874-9750ec73678e');"></div>
<div class="repeat-y" style="background-image: url('https://images.unsplash.com/photo-1562179434-aa4a4cd4d4fd');"></div>
<div class="repeat" style="background-image: url('https://images.unsplash.com/photo-1592395428407-fa955cdc3578');"></div>

结论

通过 background-repeat 属性，可以方便地指定背景图片的平铺方式。在设计网页时，可以根据需要设置背景图片的平铺方式，以获得更好的视觉效果。