當(dāng)我們需要在網(wǎng)站中使用背景圖片時(shí),有時(shí)候圖片大小不能完全匹配背景區(qū)域的大小,這時(shí)我們可以使用CSS中的background-repeat屬性來讓圖片重復(fù)填充滿整個區(qū)域。
background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;
其中,repeat表示圖片在水平和垂直方向都重復(fù)填充;repeat-x和repeat-y表示只在水平或垂直方向重復(fù)填充;no-repeat表示不重復(fù)填充。
當(dāng)我們使用repeat-x或repeat-y屬性時(shí),可以設(shè)置background-size屬性來控制背景圖片的大小,保證重復(fù)填充的區(qū)域大小和父元素的大小一致。
background-size: auto auto; background-size: width auto; background-size: auto height; background-size: width height;
其中,auto表示自動匹配圖片的原始大小,width表示設(shè)定圖片的寬度,height表示設(shè)定圖片的高度,width和height同時(shí)設(shè)定時(shí)則根據(jù)這兩個參數(shù)設(shè)定圖片大小。
使用CSS的background-repeat和background-size屬性,我們可以很方便地實(shí)現(xiàn)重復(fù)填充背景圖片的效果,讓網(wǎng)站的視覺效果更加統(tǒng)一和美觀。