1.background-repeat
通常背景圖的寬高不可能剛好和容器大小一致，（在no-repeat情況下）所以容器經常多出一些空白區域。如何處理這個空白區域就是這個屬性的使命
他有幾個值：
repeat：（默認）平鋪直至塞滿整個容器，結果通常就是容器邊緣只顯示半張圖片（空間不夠）
repeat-x：只在水平方向平鋪
repeat-y：只在垂直方向平鋪
no-repeat：不重復，只顯示一張圖片
round：圖片經過一系列的平鋪之后，再通過伸縮的方式“消化”掉剩余的空白區域，保證每張圖片的完整型
space：圖片經過一系列的平鋪之后，把剩下的空白區域均分成間隔，把每張圖片隔開，保證每張圖片的完整型
如圖，容器大小為600 * 420，一張背景圖的大小為144 * 197。橫向放4張填不滿，5張放不下。縱向2張填不滿，3張放不下.
如果設置為round，則橫向放4張，這4張圖片橫向等比放大剛好填滿容器的寬度，縱向也是如此（也有可能是縮小適應寬度）
如果設為space，則橫向放4張，剩余空間均分成間隔，把每張圖片隔開
2.background-size
這個屬性設置單張背景圖的大小，默認是原圖的大小。他的值有以下幾種：
具體數值 例如50px （注意寬高比，避免圖像失真）
百分比 例如50% （這個比例是基本容器本身，而不是原圖大小）
contain 縮放背景圖，使之適應容器大小（不改變寬高比），圖片適應容器的最大邊
cover 縮放背景圖，使之適應容器大小（不改變寬高比），圖片適應容器的最小邊
contain/cover都會將單張背景圖縮放來適應容器，區別在於contain會盡可能的顯示一張完整的圖片，容器多余的部分則交給background-repeat屬性處理。,而cover會用一張圖片覆蓋整個容器，寧願圖片有一部分顯示不出來，也會填滿整個容器
contain效果
cover效果
3.background-origin
這個屬性用來設置背景圖片的繪制原點，它有3個值：
border-box 從邊框開始繪制
padding-box 從padding開始繪制（默認）
content-box 從content開始繪制
要看效果，最好設置background-repeat: no-repeat
默認效果：即padding-box
border-box效果
content-box效果
4.background-clip 設定背景圖的顯示區域
默認情況下，元素的border，padding，centent區域都是可以顯示背景圖的，css3添加了這個屬性，可以設定背景圖的顯示區域
這個屬性有3個值：
border-box 容器所有區域都可以顯示背景圖（默認）
padding-box 只在padding + content區域的顯示背景圖
content-box 只在content區域顯示背景圖
注意：這個屬性對於background-color也是有效的！
默認效果：border-box
padding-box效果：
content-box效果
與其他屬性的關系：
background-origin默認從padding區域開始繪制背景圖，如果背景不平鋪的話，那么容器左邊和上邊的邊框區域就顯示不了背景圖，因為背景圖平鋪是往右和往下走。
5.background-position 背景圖片的位置
默認背景圖的位置是左上角，這個屬性允許用戶設置水平方向和垂直方向的偏移量，從而控制背景圖片的位置。
偏移量可選值有：
具體數值：10px 20px 代表向右移動10px，向下移動20px
百分比 40% 40% （這里的百分比是基於空白的區域的大小，而不是整個容器的大小）
關鍵字 left / right / center / top / bottom
left / top就是0%
center就是50%
right / bottom就是100%
背景圖偏移是基於默認位置進行偏移，而背景圖的默認位置是由background-origin決定的（我們都知道默認位置是左上角，但是這是不准確的描述）具體可以看background-origin的說明，這里不在贅述。
6.background-attachment 背景固定
這個屬性適用於容器出現滾動條的時候，它控制當用戶拖動滾動條時，背景圖如何展示。
scroll 系統的滾動條（body的滾動條）滾動時，背景圖跟隨滾動，默認
fixed 系統的滾動條（body的滾動條）滾動時，背景圖像固定不動
local 元素的滾動條滾動時，背景圖跟隨滾動
注意：很多人都有一個誤解，以為background-attachment=scroll就是背景圖片隨滾動條的滾動而滾動，但是這里說的滾動條是body元素的滾動條，而div元素的滾動條滾動時，div元素的背景圖是不會跟着滾動的，所里這個值放在body元素上面是沒問題的，放到div這種元素上面就有了其他含義
div這種元素不能使用fixed，fixed只能用於body
local只適用於div這種元素，它表明元素的背景圖隨着元素的滾動條滾動而滾動
通俗的說，對於body標簽：scroll => 背景圖隨着滾動，fixed => 背景圖像固定不動
對於其他標簽（body子元素） scroll => 元素滾動條滾動時背景圖像固定不動，local => 元素背景圖隨着元素的滾動條滾動而滾動
7.簡寫
background可以將多個背景屬性寫在一起，但是多個屬性要寫到一起有2個問題：
(1)屬性書寫的順序問題
(2)某些屬性值有歧義，例如background-size和background-position的值都是類似的，例如50% 50%。還有background-clip和background-origin。
對於問題一：網上的說法這個屬性書寫順序一般是:bg-color bg-image repeat，即屬性的書寫是有順序的。但是我個人的測試表明，屬性的順序可以隨意，下面的代碼也是可以正常執行的
background: content-box repeat url(timg.jpg) lightgreen 50% 50%;
對於問題二:
(1)background-origin和background-clip:如果只寫了一個屬性值，則視為background-origin和background-clip都是這個值。如果寫了2個值，則第一個值對應background-origin，第二個值對應background-clip
padding: 20px;
border: 10px solid rgba(255, 0, 0, 0.3);
background: content-box repeat url(xbx.jpg);
//相當於
background-origin:content-box;
background-clip:content-box;
background: content-box border-box repeat url(xbx.jpg);
//相當於
background-origin:content-box;
background-clip:border-box;
(2)background-position和background-size
在background中只能寫一個類似50% 50%（100px 100px）的屬性值，寫了之后視為background-position，如果寫2個會出錯
background: 50% 50% no-repeat url(xbx.jpg);
//相當於
background-position:50% 50%;
下面的寫法會出錯（換句話說，background-size要單獨設置）
background: 20px 20px 100% 100% no-repeat url(xbx.jpg);