CSS3提供了多種方法來添加背景圖片,可以通過background-image屬性和background屬性來實現。
如果只想添加背景圖片,可以使用background-image屬性,如下所示:
body { background-image: url("bg.jpg"); }
如果想同時設置背景圖片和背景顏色,可以使用background屬性,如下所示:
body { background: url("bg.jpg") no-repeat center center fixed; background-color: #000; }
上面代碼中,background設置背景圖片的位置和是否重復,fixed表示背景圖片不隨滾動而移動,background-color設置背景顏色。
如果想讓背景圖片占滿整個頁面,可以使用下面的代碼:
html { background: url("bg.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
上面代碼中,-webkit、-moz和-o前綴是為了兼容不同瀏覽器。background-size設置背景圖片的大小為占滿整個頁面。
需要注意的是,背景圖片的url路徑要正確,否則無法加載圖片。另外,背景圖片的大小要根據實際情況選擇,過大的圖片會影響頁面加載速度。
上一篇mysql查詢字段名和值
下一篇css3引導箭頭效果