在CSS2.1里，background屬性的簡寫方式包含五種屬性值，從CSS3開始，又增加了3個(gè)新的屬性值，加起來一共8個(gè)。

CSS2.1

background-color使用的背景顏色。

background-image使用的背景圖像。

background-repeat如何重復(fù)背景圖像。

background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動(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))

簡寫方式：

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