摘要：通過該屬性可以控制繪制的區域。背景圖片相關的屬性背景圖片本身是有自身尺寸的，被應用元素也有自己的尺寸。通過屬性可以修改原點位置。坐標系的反方向都是重復方式繪制。該位置是相對于原點構建的坐標系，默認情況下該位置就是在原點。

默認情況下元素的背景是指元素border（包含border）以內的區域。

在CSS3中可用使用background-clip改變元素背景區域。

指定背景在被應用元素上的繪制區域。元素盒模型包含content, padding, border, margin。默認背景繪制的區域包含：content+padding+border，不包含margin區域。通過該屬性可以控制繪制的區域。

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

其中取值text比較吊炸天，即背景只顯示在文本區域，可以實現美輪美奐的文字啦。

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

背景只能在可繪制區域里繪制，其他區域如margin區域是不會繪制的。

指定背景的顏色

只能設置一個顏色值，特殊的顏色值：transparent，也是默認值；

通過background-clip屬性可以控制background-color的應用范圍；

background-clip屬性要先背景顏色屬性時，否則該background-clip屬性無效（背景圖片就沒有這個問題）。

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

多個背景圖片之間的顯示互相獨立，各不影響；

可以同時指定背景圖片和背景顏色；

背景圖片本身是有自身尺寸的(background-size)，被應用元素也有自己的尺寸。被應用元素沒有被背景圖片覆蓋的區域則會通過重復繪制背景圖片（當然了可以通過CSS屬性修改默認的方式）的方式進行覆蓋整個繪制區域。

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

原點（origin）是指背景圖片開始繪制起始點，默認情況下原點在被應用元素的padding區域的左上角位置。通過background-origin屬性可以修改原點位置。以原點向右有X坐標軸正方向，向下為Y坐標軸正方向，背景圖片就按照這個坐標系統開始重復繪制背景圖片。坐標系的反方向都是重復方式繪制。

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

原點的坐標系是個矩形區域；

可能我們會想當然的認為背景的繪制區域（backgroud-clip）的左上角就是背景圖片繪制的原點，但實際卻不是這樣的,他們倆沒有必然的關系：

首先原點和繪制區域的默認值是不一樣的

甚至原點可能在繪制區域的外面

背景圖片的左上角稱為背景圖片的位置。該位置是相對于原點構建的坐標系，默認情況下該位置就是在原點。通過background-position可以指定圖片相對于原點移動的位置（也可以認為移動背景圖片到指定的位置）。

background-position-x: xpos | inherit | initail;
background-position-y: ypos | inherit | initail;
// 簡寫形式
background-position: xpos [ypos] | inherit | initail;

xpos取值：

絕對值：圖片左上角相對于原點X軸方向移動距離;

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

關鍵詞left: 表示圖片的左側跟原點矩形左邊對齊，相當于0%，0

關鍵詞center：表示背景圖片在原點矩形中左右居中，相當于50%

關鍵詞right：表示圖片的右側和原點矩形的右側對齊，相當于100%

ypos取值：

絕對值：相對于原點Y軸方向距離

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

關鍵詞top：表示圖片的上邊和原點矩形上邊對齊，相當于0%, 0

關鍵詞center：表示背景圖片在原點矩形上下居中，相當于50%

關鍵詞bottom：表示背景圖片的底部和原點矩形的底邊對齊，相當于100%

總結一下就是：絕對值用來控制圖片移動距離，百分比值控制圖片對齊方式，關鍵詞值是對齊方式的簡寫形式。

一方面背景圖片可能比背景區域小， 另一方面背景圖是從origin位置開始繪制的，部分背景區域可能在原點坐標系的負方向。對那些沒有被背景圖片覆蓋的區域，瀏覽器默認會通過從左到右，從上到下的方向進行重復繪制背景圖片，原點的負方向也是按照這個方式重疊繪制。通過background-repeat屬性可以控制是否重復以及怎么執行重復繪制背景圖片。

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

repeat-x, repeat-y, repeat
是瀏覽器默認的行為：從上到下，從左到右，背景圖片可能會發生剪切

space
space讓背景圖片在不發生剪切的情況下盡可能多的重復，如果有多余的空隙，則均分在各個背景圖片之間。
注意space只是保證原點矩形內背景圖片不發生剪切，對于那些不在原點矩形外的背景區域還是通過剪切的方式進行重復

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

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

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

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

width [height] 指定具體的長度，

絕對值
指定具體的值

百分比
相對于原點矩形的尺寸計算

cover
首先保證背景圖片平鋪整個繪制區域，如果背景圖片小，則通過等比例方式拉伸

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

指定多個背景圖片混合模式

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

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

scroll: 表示背景圖片相對于元素本身固定，即它會隨著被應用元素的滾動而滾動；

fixed: 表示背景圖片相對于元素的視口固定，即它不會隨著被應用元素的滾動而滾動；

local: 表示背景圖相對于應用元素的內容而固定，即如果被應用元素的內容有滾動，則其會隨著被應用元素的內容滾動而滾動（注意和fixed區別）。

簡寫格式

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

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

先確定背景類型

如果是圖片，則確定圖片的屬性（位置，大小，重復方式，繪制起始點）

確定繪制區域

背景圖片固定方式

繪制元素背景的條件：

首先要確定背景區域；

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

如果是圖片還可以更細致的控制。

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

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