background簡寫

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可以做到將背景圖片完整的鋪滿一個容器,不管容器的尺寸如何變化,但是我們也要考慮——帶寬不是無限的,將一個大圖縮小並不是明智的選擇。

發佈了85 篇原創文章 · 獲贊 80 · 訪問量 37萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章