1、background 屬性
background 屬性負責給盒子設置背景圖片和顏色，它是一個復合屬性，可以分解成以下幾個設置項：
- background-color 設置背景顏色
- background-image 設置背景圖片地址
- background-repeat 設置背景圖片如何重復平鋪（repeat-x、repeat-y、no-repeat、repeat缺省值）
- background-postion 設置背景圖片的位置
- 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%