在網(wǎng)頁(yè)開(kāi)發(fā)中,經(jīng)常需要使用 CSS 來(lái)設(shè)置背景圖片。其中,背景平鋪是一種常用的效果。通過(guò) CSS 的 background-repeat 屬性可以實(shí)現(xiàn)背景圖片在水平方向或垂直方向上平鋪。
比如,在下面的代碼中,將背景圖片設(shè)置為"bg.png",并且設(shè)置其在水平方向和垂直方向上都平鋪:
<style> body { background-image: url("bg.png"); background-repeat: repeat; } </style>其中,repeat 值表示在水平和垂直方向上都進(jìn)行平鋪。我們還可以指定只在水平方向或垂直方向上進(jìn)行平鋪,或者不進(jìn)行平鋪。 如果我們不希望背景圖片滾動(dòng),可以使用 background-attachment 屬性。該屬性控制背景圖片是否隨著頁(yè)面滾動(dòng)。如果將其設(shè)置為 fixed 值,背景圖片就會(huì)固定在頁(yè)面上,不會(huì)隨著滾動(dòng)而滾動(dòng)。 下面的代碼演示了如何設(shè)置不滾動(dòng)的背景平鋪:
<style> body { background-image: url("bg.png"); background-repeat: repeat; background-attachment: fixed; } </style>這樣,我們就可以在網(wǎng)頁(yè)中創(chuàng)建一個(gè)不滾動(dòng)的背景平鋪效果了。需要注意的是,背景圖片的大小和尺寸應(yīng)該根據(jù)實(shí)際情況進(jìn)行調(diào)整,以達(dá)到最佳的顯示效果。