1、background 屬性

background 屬性負責給盒子設置背景圖片和顏色，它是一個復合屬性，可以分解成以下幾個設置項：

1. background-color 設置背景顏色
2. background-image 設置背景圖片地址
3. background-repeat 設置背景圖片如何重復平鋪（repeat-x、repeat-y、no-repeat、repeat缺省值）
4. background-postion 設置背景圖片的位置
5. background-attachment 設置背景圖片是否固定還是隨著頁面滾動條滾動，設置值為：fixed，表示網頁滾動時，背景圖不動

background 屬性是上面五個屬性的縮寫，縮寫的形式性能更高，代碼更簡潔。

比如：background: #00ff00 url(bgimage.gif) no-repeat left center fixed

注意，除了上面的五個屬性，其余的三個屬性：background-size，background-origin，background-clip 是要單獨寫出來的。

1.1、縮寫順序

讓我們看看CSS的background屬性的官方定義：

Value: ['background-color'> ||<'background-image'> || <'background-repeat'>|| <'background-attachment'> ||<'background-position'>] | inherit

上面的內容只是定義的background屬性的值包含那些內容，但并沒有指定這些值的順序，所以說 background 屬性的值的書寫順序官方并沒有強制要求。但是為了可讀性和規范，一般來說 background 的縮寫順序是 background-color，background-image，background-repeat，background-attachment，background-position。

1.2、background-size中cover和contain的區別

菜鳥教程上的解釋：

有點難理解，通俗解釋就是：兩者均以保持圖像寬高比的形式縮放來適合背景容器的大小。

兩者之間的區別：

在no-repeat情況下，如果容器寬高比與圖片寬高比不同，

　　cover：圖片寬高比不變、鋪滿整個容器的寬高，而圖片多出的部分則會被截掉；

　　contain:圖片自身的寬高比不變，縮放至圖片自身能完全顯示出來，所以容器會有留白區域；

cover：意味著“遮罩、遮蓋”，此處理解為“塞滿”較恰當。一般來說會塞滿整個容器

contain：意為“包含”，圖片經過一定縮放會完整地顯示在容器中，但可能不會占滿整個容器。

在repeat情況下：

cover：與上述相同；contain:容器內至少有一張完整的圖，容器留白區域則平鋪背景圖，鋪不下的再裁掉。

要想使背景圖塞滿整個容器，可以使用 background-size: 100% 100%