在CSS2.1里，background屬性的簡(jiǎn)寫方式包含五種屬性值路翻，從CSS3開始茄靠，又增加了3個(gè)新的屬性值，加起來一共8個(gè)账嚎。
CSS2.1
background-color使用的背景顏色儡蔓。
background-image使用的背景圖像。
background-repeat如何重復(fù)背景圖像召锈。
background-attachment背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)涨岁。
background-position背景圖像的位置吉嚣。
CSS3
background-size背景圖片的尺寸。默認(rèn)值：'auto'? 其他值：像素秉撇，百分比，contain规阀，cover
background-origin背景圖片的定位區(qū)域谁撼。 默認(rèn)值：'padding-box'? ? ? ? ?'border-box' 滋饲、'content-box'(定義背景圖片繪制的開始點(diǎn))
background-clip背景的繪制區(qū)域。 默認(rèn)值：'border-box'? ? ? 還有'padding-box'墨榄、'content-box'(定義背景繪制的開始點(diǎn))
簡(jiǎn)寫方式：
background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip
不設(shè)置的屬性可以省略
background-Origin屬性指定background-position屬性應(yīng)該是相對(duì)位置袄秩。
注意
1逢并、如果背景圖像background-attachment是"固定"，background-origin屬性沒有任何效果背稼。
2玻蝌、background-origin 和background-clip很容易混淆，前者是對(duì)背景圖片而言俯树，后者是對(duì)背景而言许饿。不是一個(gè)概念。clip默認(rèn)值比origin默認(rèn)值范圍大球化，所以默認(rèn)不會(huì)有裁剪效果瓦糟，如果想設(shè)置裁剪，可以把origin范圍設(shè)置的比clip大就好菩浙。比如：origin:'border-box',clip:'padding-box'或者'content-box'.
3扯再、background-size中contain和cover的區(qū)別。
cover此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小斋竞。完全覆蓋，可能有圖片顯示不完整的情況浸剩。
contain此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小鳄袍∞中。可能有空白區(qū)域
如下圖一設(shè)置的contain,圖二設(shè)置的cover
