background-repeat也是相當(dāng)常用的屬性胡岔，因為你在寫背景圖時人柿，通常都會加個no-repeat牛哺，就像這樣：
background: url('../images/bg.jpg') no-repeat center;
其中的no-repeat就相當(dāng)于單獨設(shè)置background-repeat: no-repeat讼渊，很常用棍潘，就是為了不讓背景圖重復(fù)平鋪瓶籽，因為默認是橫向和縱向都會平鋪的匠童。
接下來，我將具體講講background-repeat的幾個屬性值塑顺。
一汤求、repeat俏险、repeat-x、repeat-y
1. repeat
默認值扬绪，橫向和縱向平鋪竖独，但平鋪最終的效果還跟background-position有關(guān)。例如：
① 根據(jù)左上角定位
background-position: left top;
background-repeat: repeat;
結(jié)果如下：
② 居中定位
background-position: center;
background-repeat: repeat;
結(jié)果如下：
現(xiàn)在明白了吧挤牛，其實就是先定好位莹痢，然后再向兩個方向延伸，這與書寫順序半毛錢關(guān)系都沒有墓赴，不信你順序換下也是一樣的竞膳。
2. repeat-x、repeat-y
橫向平鋪與縱向平鋪诫硕，平鋪方式與repeat一樣坦辟，先定位再平鋪。
二痘括、no-repeat
不平鋪长窄，最為常用，因為大多數(shù)情況我們都不希望背景重復(fù)纲菌。
background-position: center;
background-repeat: no-repeat;
三挠日、space
CSS3新增，當(dāng)背景圖片不能以整數(shù)次平鋪時翰舌，會用空白間隙均勻填充在圖片周圍嚣潜，圖片不縮放。
例如：
background-position: center;
background-repeat: space;
你會發(fā)現(xiàn)椅贱，background-position: center好像并沒有什么用嘛懂算！是的，當(dāng)某個方向上能平鋪多張背景圖時庇麦，background-position不生效计技，但是一旦某個方向上只能平鋪一張背景圖時，background-position的作用就來了山橄，此時就是background-position說了算垮媒！
例如，同樣大小的盒子航棱，同樣的樣式睡雇，我們給圖片放大一點，讓其在橫向只能平鋪一張饮醇，但縱向能平鋪兩張它抱，看看效果。
完美朴艰！橫向background-position生效了观蓄，圖片居中了混移，縱向則繼續(xù)按照background-repeat: space方式進行。
四蜘腌、round
CSS3新增沫屡，當(dāng)背景圖片不能以整數(shù)次平鋪時，會根據(jù)情況縮放圖片撮珠。
它其實跟background-repeat: repeat很像沮脖，因為它不像space那樣會留白，而是緊密平鋪芯急，但是與repeat不同的是勺届，它會通過縮放變形的方式讓縱橫兩個方向上正好平鋪滿整數(shù)個圖片（但是并不一定每張圖都完整顯示，后面會講到）娶耍，例如：
background-position: left top;
background-repeat: round;
此時的
background-position: left top是起作用的免姿，因為圖片是從左上角開始平鋪的，但是如果是居中定位呢榕酒？
background-position: center;
background-repeat: round;
看到了嗎胚膊？background-position: center同樣是生效的，它會先居中定位想鹰，然后再進行變形處理以讓縱橫兩個方向上正好平鋪滿整數(shù)個圖片紊婉，此時周邊的圖片會被裁剪，但是被裁剪的圖片合起來還會是一張完整的圖片辑舷。
五喻犁、兩個值
前面都是講單個值的情況，事實上何缓，background-repeat也可以有兩個值肢础，第一個代表橫向，第二個代表縱向碌廓，前面的值（repeat-x和repeat-y除外）都可以作為兩個值中的其中一個传轰。例如：
background-position: center;
background-repeat: space round;
相關(guān)推薦
CSS背景定位屬性——background-position
CSS3背景裁切屬性——background-clip
重點總結(jié)
①
background-repeat: space平鋪的圖片之間可能產(chǎn)生間隙，每個方向上的間隙都是均勻的谷婆，但前提是該方向上存在多張圖片路召，若只有一張則按照background-position的取值顯示
②background-repeat: round平鋪方式與background-repeat: repeat極為相似，只不過round會使圖片縮放變形以正好填充整數(shù)張圖片
③background-repeat也可以有兩個值波材，分別代表橫向和縱向效果
