CSS可以很方便地為網頁添加背景圖片,只需要在樣式表中添加如下代碼即可:
body { background-image: url("background.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; }
以上代碼給body元素添加了一個名為background.jpg的背景圖片,并設置了以下屬性:
- background-size: cover——讓背景圖片完全鋪滿整個屏幕。
- background-position: center——讓背景圖片的中心與屏幕中心對齊。
- background-repeat: no-repeat——避免背景圖片出現重復。
如果您的網站需要在不同的頁面使用不同的背景圖片,也可以為不同的頁面添加不同的樣式:
body.home { background-image: url("home_background.jpg"); } body.about { background-image: url("about_us_background.jpg"); } body.contact { background-image: url("contact_us_background.jpg"); }
以上代碼分別為主頁、關于我們頁面和聯系我們頁面添加了不同的背景圖片。
下一篇css 寫輪播圖