在CSS中,圖片的重復(fù)可以通過(guò)設(shè)置background-repeat
屬性來(lái)實(shí)現(xiàn),該屬性可以指定圖片在水平、垂直或兩個(gè)方向上的重復(fù)方式。
1、水平重復(fù):設(shè)置background-repeat-x
為repeat
,圖片會(huì)在水平方向上重復(fù)。
2、垂直重復(fù):設(shè)置background-repeat-y
為repeat
,圖片會(huì)在垂直方向上重復(fù)。
3、兩個(gè)方向重復(fù):設(shè)置background-repeat
為repeat
,圖片會(huì)在水平和垂直方向上重復(fù)。
還可以通過(guò)設(shè)置background-position
屬性來(lái)調(diào)整圖片的位置,如果想要讓圖片在水平方向上重復(fù),并且每次重復(fù)的位置向右移動(dòng)一定的距離,可以這樣做:
div { background-image: url('image.png'); background-repeat-x: repeat; background-position-x: 100px; /* 圖片每次重復(fù)的位置向右移動(dòng)100像素 */ }
這樣,圖片就會(huì)按照指定的方式在水平方向上重復(fù)了。