1. 定義和用法
background是一個簡寫屬性阴幌，可以在一個聲明中設(shè)置所有的背景屬性搅吁，可設(shè)置的屬性如下：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
這些屬性在background中不必全部設(shè)置迁筛，比如：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的規(guī)則進行聲明，比如：background:50px 50px/50px 50px厂财，如果只需要聲明一個芋簿，那么這個值是background-position。
同理璃饱，background-origin和background-clip的取值也是相同的与斤，在同時設(shè)置兩個的時候，順序為background-origin background-clip，比如：background:padding-box content-box撩穿，聲明一個時磷支，這個值是background-clip。
2. background-color
說明：規(guī)定背景顏色
瀏覽器支持：所有瀏覽器（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叨叙，可是設(shè)置透明度锭弊，取值0-1，如rgba(0,255,255,.5)擂错；
5.hsl()：設(shè)置色調(diào)（0-360）味滞、飽和度（0.0-100.0%）和亮度（0.0-100.0%）；
6.hsla()：同5钮呀，可以設(shè)置透明值剑鞍，取值0-1；
7.transparent：透明爽醋，默認值蚁署；
8.inherit：規(guī)定應(yīng)該從父元素繼承 background-color 屬性的設(shè)置。
9.currentColor：規(guī)定為color屬性的顏色值
background-color設(shè)置的背景顏色會填充元素的內(nèi)容區(qū)域蚂四，內(nèi)邊距區(qū)域（padding）和邊框區(qū)域（border）光戈，如果邊框有透明的部分，那么這些透明將會顯示出背景色遂赠。比如下面
#bg{
width: 10%;
height: 100px;
margin:0 auto;
padding: 50px;
border:10px dashed #f00;
background-color: #0ff;
}
為這個塊設(shè)置了50px的padding和10px的虛線邊框久妆，背景色填充了padding和邊框的透明部分。
背景色的填充區(qū)域可以通過
background-clip屬性來控制跷睦，將在后文詳細講述筷弦。
3. background-position
說明：規(guī)定背景圖像的定位位置，需要已經(jīng)設(shè)置了背景圖片
瀏覽器支持：所有瀏覽器
語法：background-position:<position> [<position>]抑诸，第二個值可選烂琴；第一個值規(guī)定水平位置，第二個值規(guī)定垂直位置
默認值：0% 0%
js語法：object.style.backgroundPosition="center"
可能的值：
1.關(guān)鍵詞top蜕乡、bottom奸绷、left、right层玲、center：規(guī)定圖像分別從頂部号醉、底部绒瘦、左邊、右邊和中間開始填充扣癣，如果只規(guī)定了第一個position，那么第二個值為center憨降；
2.percentage：用百分比指定背景圖像填充的位置父虑，可以為負值。如果只規(guī)定了第一個值授药，那么第二個值為50%士嚎；
3.length：用長度值（可以是任何單位）指定背景圖像填充的位置』谶矗可以為負值莱衩。如果只規(guī)定了第一個值，那么第二個值為50%娇澎。
在css3中笨蚁，可以為background-position提供四個參數(shù)值。
如果提供四個趟庄，每個percentage或length值的前面必須提供關(guān)鍵詞（即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,其效果如下：
如果是用長度值來規(guī)定背景圖片的位置览濒，那么這個長度值的度量方式是圖片的邊緣線到指定偏移方向的距離，比如上圖就是圖片的右邊緣到右邊界（不包括邊框）的距離拖云。
如果使用百分比來規(guī)定圖片背景的位置贷笛，那么這個百分比的度量方式不同于長度的度量方式。其度量方式為：相對于圖片的百分比位置到邊界的距離等于相對于這個塊元素的百分比距離江兢。嗯昨忆，是不是很難理解，舉個栗子：將上面的代碼最后一句改為background-position: 50% 50%;杉允，效果如下
就是說相對于圖片水平和垂直都是50%的位置（即圖片的中心點）邑贴，這個中心點到左邊界和上邊界的距離都是這個塊的寬和高（不包括邊框）的50%。
表達能力有限叔磷，更詳細的解釋可以參考《你真的了解background-position》這篇文章拢驾。
4. background-size
說明：規(guī)定背景圖像的大小，需要已經(jīng)設(shè)置了背景圖片
瀏覽器支持：IE9+改基、Firefox 4+繁疤、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。
語法：background-position:length|percentage|cover|contain;稠腊，可設(shè)置兩個值躁染，第二個值可選；第一個值設(shè)置寬度架忌，第二個值設(shè)置高度吞彤；
默認值：auto
js語法：object.style.backgroundSize="60px 80px"
可能的值：
1.length：設(shè)置背景圖像的高度和寬度√痉牛可以是任何單位饰恕。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"井仰；
2.percentage：以父元素的百分比來設(shè)置背景圖像的寬度和高度埋嵌。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"俱恶；
3.cover：將背景圖像等比縮放到完全覆蓋容器雹嗦，背景圖像有可能超出容器。
4.contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等合是，背景圖像始終被包含在容器內(nèi)俐银。
下圖設(shè)置了background-size:cover的效果：圖片覆蓋了容器（包括容器的下邊框），但是圖片部分區(qū)域超出了容器而看不到端仰。
這張是設(shè)置了background-size:contain的效果：容器包裹了整張圖片捶惜，容器的部分區(qū)域可能是背景色。
用百分比設(shè)置大小荔烧，會根據(jù)容器的大小的百分比來設(shè)置圖片的大小吱七，比如background-size: 50% 50%;是下圖的效果：圖片的寬和高是容器的寬和高的50%，所有圖片占了容器大小的四分之一鹤竭。
5. background-repeat
說明：設(shè)置是否及如何重復(fù)背景圖像踊餐。它會根據(jù)background-position的值來進行重復(fù)，而且需要已經(jīng)設(shè)置背景圖片臀稚；
瀏覽器支持：所有瀏覽器吝岭。
語法：background-position:<repeat-style> [<repeat-style>];，可設(shè)置兩個值吧寺，第二個值可選窜管；第一個用于橫向，第二個用于縱向稚机。幕帆；
默認值：repeat
js語法：object.style.backgroundRepeat="repeat-y"
可能的值：
1.repeat-x：背景圖像在橫向上平鋪
2.repeat-y：背景圖像在縱向上平鋪
3.repeat：背景圖像在橫向和縱向平鋪
4.no-repeat：背景圖像不平鋪
5.round：背景圖像自動縮放直到適應(yīng)且填充滿整個容器。（CSS3）
6.space：背景圖像以相同的間距平鋪且填充滿整個容器或某個方向赖条。（CSS3）
round和space兩個屬性值在瀏覽器的支持和表現(xiàn)情況不太一樣失乾，不做探討常熙。
6. background-origin
說明：規(guī)定 background-position 屬性相對于什么位置來定位，需要已經(jīng)設(shè)置背景圖片碱茁；
瀏覽器支持：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區(qū)域（含border）開始顯示背景圖像退个。
2.padding-box：從padding區(qū)域（含padding）開始顯示背景圖像。
3.content-box：從content區(qū)域開始顯示背景圖像调炬。
在下圖中语盈，設(shè)置了以下屬性
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區(qū)域、padding區(qū)域和內(nèi)容區(qū)域棘钞，因此缠借，上圖中它的寬為30*2+50*2+300=460px，高為30\2+50*2+200=360px宜猜，即border-box大小為460px*360px泼返；
padding-box則包括了padding區(qū)域和內(nèi)容區(qū)域，寬50*2+300px姨拥，高50*2+200px绅喉，為400px*300px；
content-box則只包含內(nèi)容區(qū)域叫乌，為300px*200px柴罐；
當(dāng)設(shè)置了background-origin: border-box;，背景從border-box開始顯示圖像憨奸，如下圖：
background-origin: padding-box;背景從padding-box開始顯示圖像：
background-origin: content-box;背景從content-box開始顯示圖像：
7. background-clip
說明：指定對象的背景向外裁剪的區(qū)域革屠；
瀏覽器支持：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區(qū)域（不含border）開始向外裁剪背景板甘。
2.padding-box：從padding區(qū)域（不含padding）開始向外裁剪背景国觉。
3.content-box：從content區(qū)域開始向外裁剪背景。
4.text：從前景內(nèi)容的形狀（比如文字）作為裁剪區(qū)域向外裁剪虾啦，如此即可實現(xiàn)使用背景作為填充色之類的遮罩效果麻诀。
background-clip: border-box;效果：
background-clip: padding-box;效果：可以看出在邊框部分的背景已經(jīng)被裁剪掉了痕寓。
background-clip: content-box;效果：內(nèi)容區(qū)域外的背景已經(jīng)被裁剪掉了。
-webkit-background-clip: text;表示從文字開始向外裁剪背景蝇闭，結(jié)合透明文字可以實現(xiàn)一些特殊效果
#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;
}
這里設(shè)置了文字的填充顏色為透明呻率，并且由文字向外裁剪，就可以做出背景填充文字的效果呻引。注意使用text屬性值需要添加瀏覽器前綴獲得支持礼仗。
8. background-attachment
說明：設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動都毒，需要已經(jīng)設(shè)置了背景圖像比庄。
瀏覽器支持：所有瀏覽器（IE7 以及更早的瀏覽器不支持 "inherit"。IE8 需要 !DOCTYPE掸鹅。IE9 支持 "inherit"）童谒。
語法：background-attachment : fixed | scroll | local;
默認值：scroll
js語法：object.style.backgroundAttachment="fixed"
可能的值：
1.fixed：背景圖像相對于窗體固定单旁。
2.scroll：背景圖像相對于元素固定，也就是說當(dāng)元素內(nèi)容滾動時背景圖像不會跟著滾動饥伊，因為背景圖像總是要跟著元素本身象浑。但會隨元素的祖先元素或窗體一起滾動。
3.local：背景圖像相對于元素內(nèi)容固定琅豆，也就是說當(dāng)元素隨元素滾動時背景圖像也會跟著滾動愉豺，因為背景圖像總是要跟著內(nèi)容。（CSS3）
9. background-image
說明：設(shè)置背景圖像茫因。
瀏覽器支持：所有瀏覽器蚪拦。
語法：background-image: url() | none | inherit;
默認值：none
js語法：object.style.backgroundImage="url(stars.gif)"
可能的值：
1.url()：指向圖像的路徑。
2.none：默認值冻押。不顯示背景圖像外盯。
3.inherit：規(guī)定應(yīng)該從父元素繼承 background-image 屬性的設(shè)置。
如果定義了多組背景圖翼雀，且背景圖之間有重疊饱苟，寫在前面的將會蓋在寫在后面的圖像之上。
