CSS(層疊樣式表)是網頁設計必不可少的一部分,它可以為網頁增加各種樣式。其中,背景屬性可以讓我們設置網頁背景的顏色、圖片等,讓網頁看起來更加美觀。下面將介紹一些常用的背景屬性。
1. background-color
body { background-color: #eee; }
background-color屬性可以用來設置網頁背景顏色,可以通過顏色值設置,如上述代碼設置背景為灰色。
2. background-image
body { background-image: url("bg.jpg"); }
background-image屬性可以用來設置網頁背景圖片,可以通過文件路徑設置,如上述代碼設置背景圖片為同目錄下的bg.jpg。
3. background-repeat
body { background-image: url("bg.jpg"); background-repeat: repeat-x; }
background-repeat屬性可以用來設置背景圖片的重復方式,可選值為repeat、repeat-x、repeat-y、no-repeat。如上述代碼所示,設置背景圖片沿x軸方向重復。
4. background-position
body { background-image: url("bg.jpg"); background-repeat: no-repeat; background-position: center; }
background-position屬性可以用來設置背景圖片的位置,可選值為left、right、center、top、bottom。如上述代碼所示,設置背景圖片居中顯示。
5. background-size
body { background-image: url("bg.jpg"); background-size: cover; }
background-size屬性可以用來設置背景圖片的大小,可選值為auto、contain、cover、具體的像素值等。如上述代碼所示,設置背景圖片可以完全覆蓋背景。
總結
CSS的背景屬性可以讓我們更好的美化網頁,上述屬性只是其中的一部分,通過這些屬性,我們可以定制出更加豐富的網頁樣式。
上一篇css背景怎么添加視頻