background是一個簡寫屬性
background: color image position/size repeat origin clip attachment initial | inherit;
它的展開式屬性爲:
background-color/*背景顏色(CSS1)*/
background-image/*背景圖片(CSS1)*/
background-position/*背景圖片的位置(CSS1)*/
background-size/*背景圖片的大小(CSS3)*/
background-repeat/*背景圖片重複方式(CSS1)*/
background-origin/*背景圖片的定位區域(CSS3)*/
background-clip/*背景背景圖片繪畫區域(CSS3)*/
background-attachment/*背景圖片是否固定或隨着頁面其餘部分滾動(CSS1)*/
注:CSS3屬性均不支持IE8-
background-attachment: scroll|fixed|inherit
scroll:默認值,背景圖像會隨着頁面其餘部分的滾動而移動
fixed:當頁面的其餘部分滾動時,背景圖像不會移動
background-clip: border-box|padding-box|content-box
border-box:默認值,背景被裁剪到邊框盒
padding-box:背景被裁剪到內邊距框
content-box:背景被裁剪到內容框
background-origin: border-box|padding-box|content-box
border-box:背景被裁剪到邊框盒
padding-box:默認值,背景被裁剪到內邊距框
content-box:背景被裁剪到內容框
注:如果background-attachment設置爲fixed時,改屬性沒有效果
background-size: length|percentage|cover|contain
默認值爲auto,只設置一個值時,另外一個默認爲auto
length: 設置背景圖片的寬度和高度
percentage:以父元素的百分比來設置背景圖片的寬度和高度
cover:使背景圖片完全覆蓋背景區域
contain:使背景圖片完全適應內容區域
注意:cover可以做到將背景圖片完整的鋪滿一個容器,不管容器的尺寸如何變化,但是我們也要考慮——帶寬不是無限的,將一個大圖縮小並不是明智的選擇。