深入淺出：background-repeat屬性

一、background-repeat屬性默認值

在CSS中，背景圖片可以通過background-image屬性進行設置，但是圖片大小通常與元素大小不匹配，這時候就需要使用background-repeat屬性來對背景圖片進行重複或平鋪。background-repeat屬性控制背景圖片在元素內被平鋪的方式。

background-repeat屬性的默認值是repeat，表示背景圖片在元素上下左右方向均平鋪重複。

   background-repeat: repeat; /* 默認值 */

二、background-clip屬性

background-clip屬性設置元素背景的繪製區域。默認情況下，背景繪製區域從border-box的外邊緣開始，直到內邊緣之間的區域。如果border-box被裁切，那麼背景將不會在裁切區域中繪製。background-clip屬性決定哪一部分的背景需要被繪製。

background-repeat屬性與background-clip屬性關聯。如果background-clip設置為padding-box，而background-repeat的值為repeat或space，則圖片將在padding-box內平鋪，以防止圖片重複裁剪。如果background-clip設置為border-box，則圖片將在border-box內平鋪。

   /* 在text節點內繪製背景圖像且僅在元素的padding框之內 */
   background-clip: padding-box;
   /* 元素內的背景圖像將在border區域內平鋪 */
   background-clip: border-box;

三、background-repeat屬性的其他設置

除了默認的repeat重複平鋪背景圖片外，background-repeat屬性還有以下幾個設置。

1、no-repeat（不平鋪）

no-repeat表示背景圖片在元素內只顯示一次，不進行重複。

   background-repeat: no-repeat;

2、repeat-x（水平平鋪）

repeat-x表示背景圖片僅在水平方向上平鋪重複，垂直方向上則不進行重複。

   background-repeat: repeat-x;

3、repeat-y（垂直平鋪）

repeat-y表示背景圖片僅在垂直方向上平鋪重複，水平方向上則不進行重複。

   background-repeat: repeat-y;

4、space和round（重複間距）

space和round也是平鋪重複背景圖片，但是與repeat不同的是，它們會在圖片之間留有一定的間距，同時調整圖片大小。

space表示背景圖片平均地進行平鋪展開，同時調整圖片尺寸使其與最佳寬度相同。round表示背景圖片在元素區域內平鋪展開，同時調整圖片尺寸使其充滿整個元素區域。

   background-repeat: space;
   background-repeat: round;

小結

在CSS中，background-repeat屬性有重複平鋪、水平平鋪、垂直平鋪、不平鋪、重複間距等設置。同時，background-repeat屬性與background-clip屬性關聯，可以對背景圖片進行更精細的控制。