CSS属性：background-repeat的使用方法

一、什么是background-repeat属性？

CSS的background-repeat属性指定了背景图片在网页中的重复方式。它控制着背景图片在网页中的边界内如何重复显示。background-repeat属性有四个值：repeat、repeat-x、repeat-y、no-repeat。

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

其中：

1. repeat：默认值。背景图片水平和垂直方向均重复。
2. repeat-x：背景图片仅在水平方向上重复。
3. repeat-y：背景图片仅在垂直方向上重复。
4. no-repeat：背景图片仅在水平和垂直方向上各显示一次。

二、如何使用background-repeat属性？

要使用background-repeat属性，只需要设置CSS样式表中的背景属性background-image和background-repeat，就可以控制网页中背景图片的重复方式。

比如，下面是一个背景图片在网页中重复显示的例子：

background-image: url("background.png");
background-repeat: repeat;

三、background-repeat的应用实例

1. 水平方向重复

有时我们需要让背景图片在水平方向上重复显示，可以使用repeat-x属性，如下所示：

background-image: url("background.png");
background-repeat: repeat-x;

2. 垂直方向重复

如果需要让背景图片在垂直方向上重复，可以使用repeat-y属性：

3. 仅显示一次

如果不想让背景图片重复显示，可以使用no-repeat属性：

background-image: url("background.png");
background-repeat: no-repeat;

4. 制作小图块背景

如果背景图片本身已经是小图块，那么可以直接设置background-repeat：

background-image: url("tiles.png");
background-repeat: repeat;

5. 不重复显示

如果只需要背景图片在网页中显示一次，可以这样写：

background-image: url("background.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

其中，background-position属性用来指定背景图片的位置，如果不设置，背景图片默认从网页左上角开始显示。background-size属性用来指定背景图片的尺寸，cover表示背景图片将填充背景区域，保持图片的纵横比例。

四、总结

在CSS中，background-repeat属性控制着背景图片在网页中的重复方式和尺寸。熟练掌握background-repeat属性的用法，可以让我们更加方便、快捷地调整网页的样式。