CSS可以使用background-image屬性將圖片作為頁(yè)面的背景。如果想要將圖片平鋪在底部,則需要使用background-position和background-repeat屬性。
body { background-image: url("footer.png"); background-position: center bottom; background-repeat: repeat-x; }
在上面的代碼中,我們使用了一個(gè)名為footer.png的圖片作為背景。我們將其放置在頁(yè)面的底部中心位置,使用了background-position: center bottom屬性。我們還使用了background-repeat: repeat-x屬性,讓圖片在水平方向上重復(fù)平鋪。
如果想要圖片不重復(fù)平鋪,只需使用background-repeat: no-repeat屬性即可。此外,可以使用background-size屬性調(diào)整圖片的大小,例如background-size: cover將圖片縮放到盡可能大的尺寸,以填滿整個(gè)背景。
body { background-image: url("footer.png"); background-position: center bottom; background-repeat: no-repeat; background-size: cover; }
如果希望將圖片平鋪在底部,但是又想讓頁(yè)面的其余部分有背景顏色或者其它背景圖片,可以給其他元素添加背景顏色或背景圖片。
body { background-image: url("background.png"); } footer { background-image: url("footer.png"); background-position: center bottom; background-repeat: repeat-x; }
在上面的代碼中,我們將背景圖片放在了body元素中,同時(shí)在footer元素中添加了另一張名為footer.png的圖片作為背景。這樣,我們就可以將圖片平鋪在底部,但是頁(yè)面的其余部分仍然可以有自己的背景。