background-repeat也是相當(dāng)常用的屬性，因?yàn)槟阍趯懕尘皥D時(shí)，通常都會(huì)加個(gè)no-repeat，就像這樣：

background: url('../images/bg.jpg') no-repeat center;

其中的no-repeat就相當(dāng)于單獨(dú)設(shè)置background-repeat: no-repeat，很常用，就是為了不讓背景圖重復(fù)平鋪，因?yàn)槟J(rèn)是橫向和縱向都會(huì)平鋪的。

接下來，我將具體講講background-repeat的幾個(gè)屬性值。

一、repeat、repeat-x、repeat-y

1. repeat

默認(rèn)值，橫向和縱向平鋪，但平鋪?zhàn)罱K的效果還跟background-position有關(guān)。例如：

① 根據(jù)左上角定位

background-position: left top;
background-repeat: repeat;

結(jié)果如下：

background-position: left top

② 居中定位

background-position: center;
background-repeat: repeat;

結(jié)果如下：

background-position: center

現(xiàn)在明白了吧，其實(shí)就是先定好位，然后再向兩個(gè)方向延伸，這與書寫順序半毛錢關(guān)系都沒有，不信你順序換下也是一樣的。

2. repeat-x、repeat-y

橫向平鋪與縱向平鋪，平鋪方式與repeat一樣，先定位再平鋪。

二、no-repeat

不平鋪，最為常用，因?yàn)榇蠖鄶?shù)情況我們都不希望背景重復(fù)。

background-position: center;
background-repeat: no-repeat;

background-repeat: no-repeat

三、space

CSS3新增，當(dāng)背景圖片不能以整數(shù)次平鋪時(shí)，會(huì)用空白間隙均勻填充在圖片周圍，圖片不縮放。

例如：

background-position: center;
background-repeat: space;

background-repeat: space

你會(huì)發(fā)現(xiàn)，background-position: center好像并沒有什么用嘛！是的，當(dāng)某個(gè)方向上能平鋪多張背景圖時(shí)，background-position不生效，但是一旦某個(gè)方向上只能平鋪一張背景圖時(shí)，background-position的作用就來了，此時(shí)就是background-position說了算！

例如，同樣大小的盒子，同樣的樣式，我們給圖片放大一點(diǎn)，讓其在橫向只能平鋪一張，但縱向能平鋪兩張，看看效果。

background-repeat: space

完美！橫向background-position生效了，圖片居中了，縱向則繼續(xù)按照background-repeat: space方式進(jìn)行。

四、round

CSS3新增，當(dāng)背景圖片不能以整數(shù)次平鋪時(shí)，會(huì)根據(jù)情況縮放圖片。

它其實(shí)跟background-repeat: repeat很像，因?yàn)樗幌?code>space那樣會(huì)留白，而是緊密平鋪，但是與repeat不同的是，它會(huì)通過縮放變形的方式讓縱橫兩個(gè)方向上正好平鋪滿整數(shù)個(gè)圖片（但是并不一定每張圖都完整顯示，后面會(huì)講到），例如：

background-position: left top;
background-repeat: round;

background-repeat: round

background-position: center;
background-repeat: round;

background-repeat: round

看到了嗎？background-position: center同樣是生效的，它會(huì)先居中定位，然后再進(jìn)行變形處理以讓縱橫兩個(gè)方向上正好平鋪滿整數(shù)個(gè)圖片，此時(shí)周邊的圖片會(huì)被裁剪，但是被裁剪的圖片合起來還會(huì)是一張完整的圖片。

五、兩個(gè)值

前面都是講單個(gè)值的情況，事實(shí)上，background-repeat也可以有兩個(gè)值，第一個(gè)代表橫向，第二個(gè)代表縱向，前面的值（repeat-x和repeat-y除外）都可以作為兩個(gè)值中的其中一個(gè)。例如：

background-position: center;
background-repeat: space round;

background-repeat: space round;

相關(guān)推薦

CSS背景定位屬性——background-position
CSS3背景裁切屬性——background-clip

重點(diǎn)總結(jié)

① background-repeat: space平鋪的圖片之間可能產(chǎn)生間隙，每個(gè)方向上的間隙都是均勻的，但前提是該方向上存在多張圖片，若只有一張則按照background-position的取值顯示
② background-repeat: round平鋪方式與background-repeat: repeat極為相似，只不過round會(huì)使圖片縮放變形以正好填充整數(shù)張圖片
③ background-repeat也可以有兩個(gè)值，分別代表橫向和縱向效果