CSS可以讓我們輕松地在網(wǎng)頁(yè)中添加背景圖片,并且還能控制圖片的位置和樣式。下面介紹一種CSS技巧,可以指定一個(gè)盒子內(nèi)的背景圖片平鋪顯示。
.box{ background-image: url("img/bg.jpg"); background-repeat: repeat; }
在這里,我們使用了background-image屬性來(lái)設(shè)置背景圖片的地址,然后使用background-repeat屬性來(lái)控制圖片的平鋪方式。
其中,background-repeat的取值有以下幾種:
- repeat:表示圖片在水平和垂直方向上都平鋪顯示
- repeat-x:表示圖片在水平方向上平鋪顯示
- repeat-y:表示圖片在垂直方向上平鋪顯示
- no-repeat:表示圖片不進(jìn)行平鋪,只顯示一遍
在這個(gè)例子中,我們使用了repeat取值,表示背景圖片在水平和垂直方向上都平鋪顯示。若想在水平方向上平鋪,可以將其改為repeat-x;若想在垂直方向上平鋪,可以將其改為repeat-y。
當(dāng)然,我們還可以使用其他的屬性來(lái)控制背景圖片的樣式和位置,比如background-size、background-position等等。
上述CSS技巧可以用來(lái)美化網(wǎng)頁(yè)的背景,讓視覺(jué)效果更加出色,并且不需要使用額外的HTML標(biāo)簽或者JavaScript代碼。