在CSS中,可以使用background-repeat屬性來控制背景圖片的重復方式。其中,重復方式之一是平鋪(repeat),即在元素區(qū)域內無限重復背景圖片。
假如有一張100px × 100px的圖片作為背景,而元素區(qū)域又是200px × 200px的正方形,那么這個圖片就會在元素區(qū)域內橫向和縱向各平鋪兩次。
我們可以使用background-repeat屬性的值來指定平鋪的方向。它有以下幾種值:
background-repeat: repeat-x; /* 僅橫向平鋪 */ background-repeat: repeat-y; /* 僅縱向平鋪 */ background-repeat: repeat; /* 橫向和縱向同時平鋪,默認值 */
如果我們希望背景圖片僅在橫向上平鋪一次,可以這樣寫:
.element { background-image: url('path/to/image.png'); background-repeat: repeat-x; }
同理,如果想要背景圖片僅在縱向上平鋪一次,可以將background-repeat的值設置為repeat-y:
.element { background-image: url('path/to/image.png'); background-repeat: repeat-y; }
最后,如果想要背景圖片在橫向和縱向上都僅平鋪一次,則可以省略不寫background-repeat屬性:
.element { background-image: url('path/to/image.png'); }