1. 定義和用法
background是一個簡寫屬性，可以在一個聲明中設置所有的背景屬性，可設置的屬性如下：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
這些屬性在background中不必全部設置，比如：background：#0ff url(bg.jpg) no-repeat，官方對屬性的順序也沒有強制要求，但是為了方便起見，個人建議按照
background-color，background-image，background-repeat，background-attachment，background-position，background-size，background-origin，background-clip的順序進行聲明。
另外值得一提的是，如果需要在同時聲明background-position和background-size，由于其單位可能是相同的，所以要按照background-position/background-size的規則進行聲明，比如：background:50px 50px/50px 50px，如果只需要聲明一個，那么這個值是background-position。
同理，background-origin和background-clip的取值也是相同的，在同時設置兩個的時候，順序為background-origin background-clip，比如：background:padding-box content-box，聲明一個時，這個值是background-clip。
2. background-color
說明：規定背景顏色
瀏覽器支持：所有瀏覽器（IE8及之前版本不支持inherit屬性值）
語法：background-color：<color>
默認值：transparent
js語法：object.style.backgroundColor="#00FF00"
可能的值：
1.named_color：顏色名稱，如red；
2.hex_number：十六進制顏色，如#fff000；
3.rgb()：rgb代碼顏色，如rgb(0,255,255)；
4.rgba()：同3，可是設置透明度，取值0-1，如rgba(0,255,255,.5)；
5.hsl()：設置色調（0-360）、飽和度（0.0-100.0%）和亮度（0.0-100.0%）；
6.hsla()：同5，可以設置透明值，取值0-1；
7.transparent：透明，默認值；
8.inherit：規定應該從父元素繼承 background-color 屬性的設置。
9.currentColor：規定為color屬性的顏色值
background-color設置的背景顏色會填充元素的內容區域，內邊距區域（padding）和邊框區域（border），如果邊框有透明的部分，那么這些透明將會顯示出背景色。比如下面
#bg{
width: 10%;
height: 100px;
margin:0 auto;
padding: 50px;
border:10px dashed #f00;
background-color: #0ff;
}
為這個塊設置了50px的padding和10px的虛線邊框，背景色填充了padding和邊框的透明部分。
背景色的填充區域可以通過
background-clip屬性來控制，將在后文詳細講述。
3. background-position
說明：規定背景圖像的定位位置，需要已經設置了背景圖片
瀏覽器支持：所有瀏覽器
語法：background-position:<position> [<position>]，第二個值可選；第一個值規定水平位置，第二個值規定垂直位置
默認值：0% 0%
js語法：object.style.backgroundPosition="center"
可能的值：
1.關鍵詞top、bottom、left、right、center：規定圖像分別從頂部、底部、左邊、右邊和中間開始填充，如果只規定了第一個position，那么第二個值為center；
2.percentage：用百分比指定背景圖像填充的位置，可以為負值。如果只規定了第一個值，那么第二個值為50%；
3.length：用長度值（可以是任何單位）指定背景圖像填充的位置。可以為負值。如果只規定了第一個值，那么第二個值為50%。
在css3中，可以為background-position提供四個參數值。
如果提供四個，每個percentage或length值的前面必須提供關鍵詞（即top、bottom、left、right、center）來指定相對偏移的方向，比如：
#bg{
width: 500px;
height: 300px;
margin:0 auto;
padding: 50px;
border:10px dashed rgba(255,0,0,.7);
background: #0ff url('https://p3.music.126.net/ZjlPU7akZZYlscvnLS9NjA==/18668607929720106.jpg') no-repeat;
background-size: 100px;
background-position: right 50px bottom 50px;
}
最后一行background-position:right 50px bottom 50px;的意思是相對右邊界向左偏移50px，相對底邊界向上偏移50px,其效果如下：
如果是用長度值來規定背景圖片的位置，那么這個長度值的度量方式是圖片的邊緣線到指定偏移方向的距離，比如上圖就是圖片的右邊緣到右邊界（不包括邊框）的距離。
如果使用百分比來規定圖片背景的位置，那么這個百分比的度量方式不同于長度的度量方式。其度量方式為：相對于圖片的百分比位置到邊界的距離等于相對于這個塊元素的百分比距離。嗯，是不是很難理解，舉個栗子：將上面的代碼最后一句改為background-position: 50% 50%;，效果如下
就是說相對于圖片水平和垂直都是50%的位置（即圖片的中心點），這個中心點到左邊界和上邊界的距離都是這個塊的寬和高（不包括邊框）的50%。
表達能力有限，更詳細的解釋可以參考《你真的了解background-position》這篇文章。
4. background-size
說明：規定背景圖像的大小，需要已經設置了背景圖片
瀏覽器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。
語法：background-position:length|percentage|cover|contain;，可設置兩個值，第二個值可選；第一個值設置寬度，第二個值設置高度；
默認值：auto
js語法：object.style.backgroundSize="60px 80px"
可能的值：
1.length：設置背景圖像的高度和寬度。可以是任何單位。如果只設置一個值，則第二個值會被設置為 "auto"；
2.percentage：以父元素的百分比來設置背景圖像的寬度和高度。如果只設置一個值，則第二個值會被設置為 "auto"；
3.cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
4.contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
下圖設置了background-size:cover的效果：圖片覆蓋了容器（包括容器的下邊框），但是圖片部分區域超出了容器而看不到。
這張是設置了background-size:contain的效果：容器包裹了整張圖片，容器的部分區域可能是背景色。
用百分比設置大小，會根據容器的大小的百分比來設置圖片的大小，比如background-size: 50% 50%;是下圖的效果：圖片的寬和高是容器的寬和高的50%，所有圖片占了容器大小的四分之一。
5. background-repeat
說明：設置是否及如何重復背景圖像。它會根據background-position的值來進行重復，而且需要已經設置背景圖片；
瀏覽器支持：所有瀏覽器。
語法：background-position:<repeat-style> [<repeat-style>];，可設置兩個值，第二個值可選；第一個用于橫向，第二個用于縱向。；
默認值：repeat
js語法：object.style.backgroundRepeat="repeat-y"
可能的值：
1.repeat-x：背景圖像在橫向上平鋪
2.repeat-y：背景圖像在縱向上平鋪
3.repeat：背景圖像在橫向和縱向平鋪
4.no-repeat：背景圖像不平鋪
5.round：背景圖像自動縮放直到適應且填充滿整個容器。（CSS3）
6.space：背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3）
round和space兩個屬性值在瀏覽器的支持和表現情況不太一樣，不做探討。
6. background-origin
說明：規定 background-position 屬性相對于什么位置來定位，需要已經設置背景圖片；
瀏覽器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 屬性。
語法：background-origin: padding-box|border-box|content-box;；
默認值：padding-box
js語法：object.style.backgroundOrigin="content-box""
可能的值：
1.border-box：從border區域（含border）開始顯示背景圖像。
2.padding-box：從padding區域（含padding）開始顯示背景圖像。
3.content-box：從content區域開始顯示背景圖像。
在下圖中，設置了以下屬性
width: 300px;
height: 200px;
margin:0 auto;
padding: 50px;
border:30px dashed rgba(255,0,0,.7);
其中border為30px，padding為50px，寬為300px，高為200px
border-box包括了border區域、padding區域和內容區域，因此，上圖中它的寬為30*2+50*2+300=460px，高為30\2+50*2+200=360px，即border-box大小為460px*360px；
padding-box則包括了padding區域和內容區域，寬50*2+300px，高50*2+200px，為400px*300px；
content-box則只包含內容區域，為300px*200px；
當設置了background-origin: border-box;，背景從border-box開始顯示圖像，如下圖：
background-origin: padding-box;背景從padding-box開始顯示圖像：
background-origin: content-box;背景從content-box開始顯示圖像：
7. background-clip
說明：指定對象的背景向外裁剪的區域；
瀏覽器支持：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。
語法：background-origin: padding-box|border-box|content-box|text;
默認值：border-box
js語法：object.style.backgroundClip="content-box"
可能的值：
1.border-box：從border區域（不含border）開始向外裁剪背景。
2.padding-box：從padding區域（不含padding）開始向外裁剪背景。
3.content-box：從content區域開始向外裁剪背景。
4.text：從前景內容的形狀（比如文字）作為裁剪區域向外裁剪，如此即可實現使用背景作為填充色之類的遮罩效果。
background-clip: border-box;效果：
background-clip: padding-box;效果：可以看出在邊框部分的背景已經被裁剪掉了。
background-clip: content-box;效果：內容區域外的背景已經被裁剪掉了。
-webkit-background-clip: text;表示從文字開始向外裁剪背景，結合透明文字可以實現一些特殊效果
#bg{
width: 300px;
height: 200px;
margin:0 auto;
padding: 50px;
border:30px dashed rgba(255,0,0,.7);
background: #0ff url('https://p3.music.126.net/ZjlPU7akZZYlscvnLS9NjA==/18668607929720106.jpg') no-repeat;
background-size: cover;
font-size: 50px;
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
}
這里設置了文字的填充顏色為透明，并且由文字向外裁剪，就可以做出背景填充文字的效果。注意使用text屬性值需要添加瀏覽器前綴獲得支持。
8. background-attachment
說明：設置背景圖像是否固定或者隨著頁面的其余部分滾動，需要已經設置了背景圖像。
瀏覽器支持：所有瀏覽器（IE7 以及更早的瀏覽器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"）。
語法：background-attachment : fixed | scroll | local;
默認值：scroll
js語法：object.style.backgroundAttachment="fixed"
可能的值：
1.fixed：背景圖像相對于窗體固定。
2.scroll：背景圖像相對于元素固定，也就是說當元素內容滾動時背景圖像不會跟著滾動，因為背景圖像總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。
3.local：背景圖像相對于元素內容固定，也就是說當元素隨元素滾動時背景圖像也會跟著滾動，因為背景圖像總是要跟著內容。（CSS3）
9. background-image
說明：設置背景圖像。
瀏覽器支持：所有瀏覽器。
語法：background-image: url() | none | inherit;
默認值：none
js語法：object.style.backgroundImage="url(stars.gif)"
可能的值：
1.url()：指向圖像的路徑。
2.none：默認值。不顯示背景圖像。
3.inherit：規定應該從父元素繼承 background-image 屬性的設置。
如果定義了多組背景圖，且背景圖之間有重疊，寫在前面的將會蓋在寫在后面的圖像之上。
