摘要：通過(guò)該屬性可以控制繪制的區(qū)域。背景圖片相關(guān)的屬性背景圖片本身是有自身尺寸的，被應(yīng)用元素也有自己的尺寸。通過(guò)屬性可以修改原點(diǎn)位置。坐標(biāo)系的反方向都是重復(fù)方式繪制。該位置是相對(duì)于原點(diǎn)構(gòu)建的坐標(biāo)系，默認(rèn)情況下該位置就是在原點(diǎn)。

默認(rèn)情況下元素的背景是指元素border（包含border）以內(nèi)的區(qū)域。

在CSS3中可用使用background-clip改變?cè)乇尘皡^(qū)域。

指定背景在被應(yīng)用元素上的繪制區(qū)域。元素盒模型包含content, padding, border, margin。默認(rèn)背景繪制的區(qū)域包含：content+padding+border，不包含margin區(qū)域。通過(guò)該屬性可以控制繪制的區(qū)域。

background-clip: border-box|padding-box|content-box|initial|inherit|text;

其中取值text比較吊炸天，即背景只顯示在文本區(qū)域，可以實(shí)現(xiàn)美輪美奐的文字啦。

該屬性顏可以影響顏色類型和圖片類型的背景；

背景只能在可繪制區(qū)域里繪制，其他區(qū)域如margin區(qū)域是不會(huì)繪制的。

指定背景的顏色

只能設(shè)置一個(gè)顏色值，特殊的顏色值：transparent，也是默認(rèn)值；

通過(guò)background-clip屬性可以控制background-color的應(yīng)用范圍；

background-clip屬性要先背景顏色屬性時(shí)，否則該background-clip屬性無(wú)效（背景圖片就沒有這個(gè)問(wèn)題）。

給元素指定一個(gè)或多個(gè)圖片類型的背景（而只能指定一種背景顏色）。CSS3可以指定多個(gè)背景圖片了。多個(gè)圖片之間用逗號(hào)隔開，其他相關(guān)的屬性可以做作用于多個(gè)背景圖片上，也是用逗號(hào)隔開。

多個(gè)背景圖片之間的顯示互相獨(dú)立，各不影響；

可以同時(shí)指定背景圖片和背景顏色；

背景圖片本身是有自身尺寸的(background-size)，被應(yīng)用元素也有自己的尺寸。被應(yīng)用元素沒有被背景圖片覆蓋的區(qū)域則會(huì)通過(guò)重復(fù)繪制背景圖片（當(dāng)然了可以通過(guò)CSS屬性修改默認(rèn)的方式）的方式進(jìn)行覆蓋整個(gè)繪制區(qū)域。

背景圖片本身是有自身尺寸的(background-size)，被應(yīng)用元素也有自己的尺寸。可以對(duì)背景圖片進(jìn)行更復(fù)雜的操作。

原點(diǎn)（origin）是指背景圖片開始繪制起始點(diǎn)，默認(rèn)情況下原點(diǎn)在被應(yīng)用元素的padding區(qū)域的左上角位置。通過(guò)background-origin屬性可以修改原點(diǎn)位置。以原點(diǎn)向右有X坐標(biāo)軸正方向，向下為Y坐標(biāo)軸正方向，背景圖片就按照這個(gè)坐標(biāo)系統(tǒng)開始重復(fù)繪制背景圖片。坐標(biāo)系的反方向都是重復(fù)方式繪制。

background-origin: padding-box|border-box|content-box|initial|inherit;

原點(diǎn)的坐標(biāo)系是個(gè)矩形區(qū)域；

可能我們會(huì)想當(dāng)然的認(rèn)為背景的繪制區(qū)域（backgroud-clip）的左上角就是背景圖片繪制的原點(diǎn)，但實(shí)際卻不是這樣的,他們倆沒有必然的關(guān)系：

首先原點(diǎn)和繪制區(qū)域的默認(rèn)值是不一樣的

甚至原點(diǎn)可能在繪制區(qū)域的外面

背景圖片的左上角稱為背景圖片的位置。該位置是相對(duì)于原點(diǎn)構(gòu)建的坐標(biāo)系，默認(rèn)情況下該位置就是在原點(diǎn)。通過(guò)background-position可以指定圖片相對(duì)于原點(diǎn)移動(dòng)的位置（也可以認(rèn)為移動(dòng)背景圖片到指定的位置）。

background-position-x: xpos | inherit | initail;
background-position-y: ypos | inherit | initail;
// 簡(jiǎn)寫形式
background-position: xpos [ypos] | inherit | initail;

xpos取值：

絕對(duì)值：圖片左上角相對(duì)于原點(diǎn)X軸方向移動(dòng)距離;

百分比：計(jì)算方式比較奇葩。
如background-position-x: 10%并不是表示圖片左上角相對(duì)于原點(diǎn)X軸方向移動(dòng)10%，而是表示背景圖片X軸方向10%的位置（基于圖片Size計(jì)算）和原點(diǎn)坐標(biāo)X軸方向10%的位置（基于原點(diǎn)矩形寬度計(jì)算）對(duì)齊。計(jì)算方式有點(diǎn)繞，主要目的是通過(guò)這種計(jì)算方式可以很容易實(shí)現(xiàn)背景圖片的對(duì)齊：如0%即表示左對(duì)齊，50%表示居中，100%表示右對(duì)齊。

關(guān)鍵詞left: 表示圖片的左側(cè)跟原點(diǎn)矩形左邊對(duì)齊，相當(dāng)于0%，0

關(guān)鍵詞center：表示背景圖片在原點(diǎn)矩形中左右居中，相當(dāng)于50%

關(guān)鍵詞right：表示圖片的右側(cè)和原點(diǎn)矩形的右側(cè)對(duì)齊，相當(dāng)于100%

ypos取值：

絕對(duì)值：相對(duì)于原點(diǎn)Y軸方向距離

百分比：類似xpos取值百分比

關(guān)鍵詞top：表示圖片的上邊和原點(diǎn)矩形上邊對(duì)齊，相當(dāng)于0%, 0

關(guān)鍵詞center：表示背景圖片在原點(diǎn)矩形上下居中，相當(dāng)于50%

關(guān)鍵詞bottom：表示背景圖片的底部和原點(diǎn)矩形的底邊對(duì)齊，相當(dāng)于100%

總結(jié)一下就是：絕對(duì)值用來(lái)控制圖片移動(dòng)距離，百分比值控制圖片對(duì)齊方式，關(guān)鍵詞值是對(duì)齊方式的簡(jiǎn)寫形式。

一方面背景圖片可能比背景區(qū)域小， 另一方面背景圖是從origin位置開始繪制的，部分背景區(qū)域可能在原點(diǎn)坐標(biāo)系的負(fù)方向。對(duì)那些沒有被背景圖片覆蓋的區(qū)域，瀏覽器默認(rèn)會(huì)通過(guò)從左到右，從上到下的方向進(jìn)行重復(fù)繪制背景圖片，原點(diǎn)的負(fù)方向也是按照這個(gè)方式重疊繪制。通過(guò)background-repeat屬性可以控制是否重復(fù)以及怎么執(zhí)行重復(fù)繪制背景圖片。

background-repeat: repeat | repeat-x | repeat-y | space | round | initital | inherit

repeat-x, repeat-y, repeat
是瀏覽器默認(rèn)的行為：從上到下，從左到右，背景圖片可能會(huì)發(fā)生剪切

space
space讓背景圖片在不發(fā)生剪切的情況下盡可能多的重復(fù)，如果有多余的空隙，則均分在各個(gè)背景圖片之間。
注意space只是保證原點(diǎn)矩形內(nèi)背景圖片不發(fā)生剪切，對(duì)于那些不在原點(diǎn)矩形外的背景區(qū)域還是通過(guò)剪切的方式進(jìn)行重復(fù)

round
round跟space類似，但是如果有多余的空隙則背景圖片通過(guò)縮放的方式侵占空隙。
拉伸：多余的空間小于背景圖片一半
壓縮：多余的空間大于背景圖片的一半
注意round跟space類似，round也只是保證原點(diǎn)矩形內(nèi)背景圖片不發(fā)生剪切，對(duì)于那些不在原點(diǎn)矩形外的背景區(qū)域還是通過(guò)剪切的方式進(jìn)行重復(fù)。

背景圖片可能具有原始的尺寸，可以通過(guò)background-size指定背景圖片的大小，進(jìn)而可以對(duì)背景圖片進(jìn)行縮放操作。

background-size: auto | width [height] | cover | contain | initail | inherit

auto表示使用圖片的本身的尺寸；

width [height] 指定具體的長(zhǎng)度，

絕對(duì)值
指定具體的值

百分比
相對(duì)于原點(diǎn)矩形的尺寸計(jì)算

cover
首先保證背景圖片平鋪整個(gè)繪制區(qū)域，如果背景圖片小，則通過(guò)等比例方式拉伸

contain
首先保證背景圖片完整顯示背景圖片，如果背景圖片大，則通過(guò)等比例方式縮小

指定多個(gè)背景圖片混合模式

指定背景圖片的固定方式。

background-attachment: scroll|fixed|local|initial|inherit;

scroll: 表示背景圖片相對(duì)于元素本身固定，即它會(huì)隨著被應(yīng)用元素的滾動(dòng)而滾動(dòng)；

fixed: 表示背景圖片相對(duì)于元素的視口固定，即它不會(huì)隨著被應(yīng)用元素的滾動(dòng)而滾動(dòng)；

local: 表示背景圖相對(duì)于應(yīng)用元素的內(nèi)容而固定，即如果被應(yīng)用元素的內(nèi)容有滾動(dòng)，則其會(huì)隨著被應(yīng)用元素的內(nèi)容滾動(dòng)而滾動(dòng)（注意和fixed區(qū)別）。

簡(jiǎn)寫格式

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

額，好長(zhǎng)，記不清的話還不如使用具體的backgroud屬性。方便的記憶法：

先確定背景類型

如果是圖片，則確定圖片的屬性（位置，大小，重復(fù)方式，繪制起始點(diǎn)）

確定繪制區(qū)域

背景圖片固定方式

繪制元素背景的條件：

首先要確定背景區(qū)域；

確定背景類型：顏色、圖片；

如果是圖片還可以更細(xì)致的控制。

除了background-clip可以應(yīng)用于background-color其他屬性都是用于background-image的；

如果background-clip取值為border-box，則border會(huì)覆蓋在background上面，即border的顏色或者圖片會(huì)覆蓋背景顏色或者圖片。