深入了解CSS屬性background-repeat

一、background-repeat屬性默認值

在不設置background-repeat屬性時，它的默認值為repeat。它表示背景圖片將會重複顯示，當圖片的寬度或高度小於元素的寬度或高度時，背景圖片將自動重複顯示，覆蓋整個元素。

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

二、background-clip屬性

background-clip屬性用於指定背景圖片的裁剪區域。它的默認值是border-box，表示背景圖片會顯示到邊框邊緣為止。如果將其值設置為padding-box，背景圖片會顯示到內邊距邊緣。如果將其設置為content-box，則背景圖片僅顯示在內容區域中。

    background-image: url("example.png");
    background-repeat: repeat;
    background-clip: border-box;

三、background-repeat相關屬性

1、background-repeat: no-repeat

當設置background-repeat屬性為no-repeat時，背景圖片不會自動重複顯示，只會顯示一次。

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

2、background-repeat: repeat-x

當設置background-repeat屬性為repeat-x時，背景圖片只在水平方向上自動重複顯示，垂直方向上不會重複。

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

3、background-repeat: repeat-y

當設置background-repeat屬性為repeat-y時，背景圖片只在垂直方向上重複顯示，水平方向上不會重複。

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

4、background-repeat: space

當設置background-repeat屬性為space時，背景圖片將在水平和垂直方向上重複顯示。如果元素的大小大於背景圖片的大小，將會自動計算圖片的間距，使圖片在元素中均勻分布。

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

5、background-repeat: round

當設置background-repeat屬性為round時，背景圖片將在水平和垂直方向上重複顯示。如果元素的大小大於背景圖片的大小，將會自動調整圖片的大小和間距，讓圖片均勻分布並完全填充整個元素。

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