【CSS】background-repeat的作用是什么，怎么使用？

background-repeat 属性在 CSS 中用于控制背景图像是否以及如何重复。当背景图像的尺寸小于其容器的尺寸时，该属性决定了图像是否以及如何填充额外的空间。

作用

background-repeat 属性主要用于确定以下三个方面：

1. 是否重复：背景图像是否应该在水平和/或垂直方向上重复。
2. 如何重复：背景图像如何填充容器的额外空间。

使用方法

该属性接受以下值：

• repeat：默认值。图像在水平和垂直方向上都会重复。
• repeat-x：图像只在水平方向上重复。
• repeat-y：图像只在垂直方向上重复。
• no-repeat：图像不重复。
• space：图像在水平和垂直方向上重复，但图像之间的空间相等（图像之间可能有额外的空间或图像可能会被截断）。
• round：图像在水平和垂直方向上重复，但图像会被缩放以恰好填满整个容器，不会有额外的空间，图像可能不会完整显示。

示例

以下是一些使用 background-repeat 的示例：

/* 图像在水平和垂直方向上都会重复 */
.repeat {
    background-image: url('image.jpg');
    background-repeat: repeat;
}

/* 图像只在水平方向上重复 */
.repeat-x {
    background-image: url('image.jpg');
    background-repeat: repeat-x;
}

/* 图像只在垂直方向上重复 */
.repeat-y {
    background-image: url('image.jpg');
    background-repeat: repeat-y;
}

/* 图像不重复 */
.no-repeat {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
}

/* 图像在水平和垂直方向上重复，但图像之间的空间相等 */
.space {
    background-image: url('image.jpg');
    background-repeat: space;
}

/* 图像在水平和垂直方向上重复，但图像会被缩放以恰好填满整个容器 */
.round {
    background-image: url('image.jpg');
    background-repeat: round;
}

在这些示例中，每个类都被赋予了一个背景图像，并通过 background-repeat 属性控制该图像的重复方式。这些类可以应用于 HTML 元素，以控制其背景图像的显示方式。