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屬性的用法，可以讓我們更加方便、快捷地調整網頁的樣式。