1. background-color
body { background-color: #eee; }
background-color屬性可以用來(lái)設(shè)置網(wǎng)頁(yè)背景顏色,可以通過(guò)顏色值設(shè)置,如上述代碼設(shè)置背景為灰色。
2. background-image
body { background-image: url("bg.jpg"); }
background-image屬性可以用來(lái)設(shè)置網(wǎng)頁(yè)背景圖片,可以通過(guò)文件路徑設(shè)置,如上述代碼設(shè)置背景圖片為同目錄下的bg.jpg。
3. background-repeat
body { background-image: url("bg.jpg"); background-repeat: repeat-x; }
background-repeat屬性可以用來(lái)設(shè)置背景圖片的重復(fù)方式,可選值為repeat、repeat-x、repeat-y、no-repeat。如上述代碼所示,設(shè)置背景圖片沿x軸方向重復(fù)。
4. background-position
body { background-image: url("bg.jpg"); background-repeat: no-repeat; background-position: center; }
background-position屬性可以用來(lái)設(shè)置背景圖片的位置,可選值為left、right、center、top、bottom。如上述代碼所示,設(shè)置背景圖片居中顯示。
5. background-size
body { background-image: url("bg.jpg"); background-size: cover; }
background-size屬性可以用來(lái)設(shè)置背景圖片的大小,可選值為auto、contain、cover、具體的像素值等。如上述代碼所示,設(shè)置背景圖片可以完全覆蓋背景。
總結(jié)
CSS的背景屬性可以讓我們更好的美化網(wǎng)頁(yè),上述屬性只是其中的一部分,通過(guò)這些屬性,我們可以定制出更加豐富的網(wǎng)頁(yè)樣式。