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合適的應用非常重要。