CSS Background-Repeat

一、什么是CSS Background-Repeat

CSS Background-Repeat是一个用于设置CSS背景图片重复方式的属性。通过设置该属性，我们可以控制背景图片在某个元素的背景中如何重新排列，以达到不同的视觉效果。

该属性有多个值可以选择：

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

二、背景图片重复方式的选取

1、repeat

repeat是background-repeat属性默认值。它表示在水平方向和垂直方向都重复。

background-image: url("example.gif");
background-repeat: repeat;

2、repeat-x

repeat-x只在水平方向上进行重复。

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

3、repeat-y

repeat-y只在垂直方向上进行重复。

background-image: url("example.gif");
background-repeat: repeat-y;

4、no-repeat

no-repeat是表示不重复，图片只显示一次。

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

5、space

space使背景图片在水平和垂直方向上平铺，但是在最后一行或者一列上不完全平铺，所以没有边界。

background-image: url("example.gif");
background-repeat: space;

6、round

round与space类似，背景图片在水平和垂直方向上平铺，但是它自适应地改变背景图片的大小，以便它完全填满容器。

background-image: url("example.gif");
background-repeat: round;

三、背景图片重复的应用实例

CSS Background-Repeat可以为网页的美化添加更多的元素，下面是使用Background-Repeat的实例：

1、重复纹路，使你的网站看起来像质感更好的印刷品。

body {
    background-image: url("example.gif");
    background-repeat: repeat;
}

2、只在网站的头部添加一个公司标志。

#logo {
    background-image: url("logo.gif");
    background-repeat: no-repeat;
    height: 120px;
    width: 300px;
}

3、一个由图片组成的磁贴背景。

body {
    background-image: url("example-image.png");
    background-repeat: repeat;
    background-color: #cccccc;
}

除此之外，可以将背景定为一张大图片，这样效果会非常惊人，尤其是在使用高清分辨率屏幕时。最后，需要特别注意的是：由于不同的元素有不同的大小，因此Background-Repeat合适的应用非常重要。