CSS Background-repeat Property

引言

这个 background-repeat 属性允许我们定义背景图片在网页背景中重复的方式。默认情况下，CSS 中的背景图片会在垂直和水平方向上重复。

提示

背景图片的位置由 background-position 属性定义。如果开发者没有定义任何 position 属性，那么默认情况下，图片总是放置在元素的左上角。

CSS Background-repeat 语法

我们可以使用以下语法来定义 CSS background-repeat 属性。

在上述语法中

1. Repeat (重复)

这有助于在垂直或水平方向上设置背景图片。这是 CSS background-repeat 的默认值。

2. Repeat-x (水平重复)

通过这个，背景图片仅在水平方向上重复。

3. Repeat-y (垂直重复)

通过这个，背景图片仅在垂直方向上重复。

4. No-repeat (不重复)

通过这个，背景图片将停止在网页上重复。

5. Space (空间)

这允许背景图片重复而不会裁剪边框。裁剪意味着空白将均匀分布在所有重复的图片之间。

6. Round (圆整)

这将重复所有背景图片。在这里，所有图片都会被拉伸以填充网页上的可用空白。

7. Initial (初始)

通过这个，我们可以设置背景属性的默认值。

8. Inherit (继承)

通过这个，属性值将从父元素继承。

现在我们将看到一些例子来理解这个值在 background-repeat 属性中的作用。

示例 1：(使用 background repeat 进行重复)

在这个例子中，背景图片以 background-repeat 属性的默认值进行重复，即在垂直和水平方向上。让我们通过一个例子来理解。

代码

输出

说明

在上面的代码中，我们使用 background-repeat 属性为 repeat。

示例 2：(使用 Background repeat 进行 Repeat-X)

在这个例子中，我们将把 background-repeat 属性设置为 repeat-x。

代码

输出

说明

在上面的代码中，我们使用 background-repeat 属性为 repeat-x。

示例 3：(使用 background 属性进行 No repeat)

在这个例子中，我们将把 background-repeat 属性设置为 no repeat。

代码

输出

说明

在上面的代码中，我们使用 background-repeat 属性为 no repeat。

注意：如果背景图片的大小大于背景区域，它将不会重复，因为图片太大而无法放入该小区域。

示例 4：(使用 background repeat 进行 Space)

在这个例子中，我们将把 background-repeat 属性设置为 space。

代码

输出

说明

在上面的代码中，我们使用 background-repeat 属性为 space。

示例 5：(使用 background-repeat 进行 Round)

在这个例子中，我们将把 background-repeat 属性设置为 round。

代码

说明

在上面的代码中，我们使用 background-repeat 属性为 round。