CSS background系列屬性

1、元素背景是指哪些區域

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

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

1.1 background-clip

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

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

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

1. 該屬性顏能夠影響顏色類型和圖片類型的背景；
2. 背景只能在可繪製區域裏繪製，其餘區域如margin區域是不會繪製的。

2、背景顏色

2.1 background-color

指定背景的顏色

1. 只能設置一個顏色值，特殊的顏色值：transparent，也是默認值；
2. 經過background-clip屬性能夠控制background-color的應用範圍；
3. background-clip屬性要先背景顏色屬性時，不然該background-clip屬性無效（背景圖片就沒有這個問題）。

3、背景圖片

3.1 指定背景圖片

1）background-image

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

1. 多個背景圖片之間的顯示互相獨立，各不影響；
2. 能夠同時指定背景圖片和背景顏色；
3. 背景圖片自己是有自身尺寸的(background-size)，被應用元素也有本身的尺寸。被應用元素沒有被背景圖片覆蓋的區域則會經過重複繪製背景圖片（固然了能夠經過CSS屬性修改默認的方式）的方式進行覆蓋整個繪製區域。

3.2 背景圖片相關的屬性

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

1）background-origin

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

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

1. 原點的座標系是個矩形區域；
2. 可能咱們會想固然的認爲背景的繪製區域（backgroud-clip）的左上角就是背景圖片繪製的原點，但實際卻不是這樣的,他們倆沒有必然的關係：

• 首先原點和繪製區域的默認值是不同的
• 甚至原點可能在繪製區域的外面

2） background-position

背景圖片的左上角稱爲背景圖片的位置。該位置是相對於原點構建的座標系，默認狀況下該位置就是在原點。經過background-position能夠指定圖片相對於原點移動的位置（也能夠認爲移動背景圖片到指定的位置）。

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

1. xpos取值：

   • 絕對值：圖片左上角相對於原點X軸方向移動距離;
   • 百分比：計算方式比較奇葩。
     如background-position-x: 10%並非表示圖片左上角相對於原點X軸方向移動10%，而是表示背景圖片X軸方向10%的位置（基於圖片Size計算）和原點座標X軸方向10%的位置（基於原點矩形寬度計算）對齊。計算方式有點繞，主要目的是經過這種計算方式能夠很容易實現背景圖片的對齊：如0%即表示左對齊，50%表示居中，100%表示右對齊。
   • 關鍵詞left: 表示圖片的左側跟原點矩形左邊對齊，至關於0%，0
   • 關鍵詞center：表示背景圖片在原點矩形中左右居中，至關於50%
   • 關鍵詞right：表示圖片的右側和原點矩形的右側對齊，至關於100%

2. ypos取值：

   • 絕對值：相對於原點Y軸方向距離
   • 百分比：相似xpos取值百分比
   • 關鍵詞top：表示圖片的上邊和原點矩形上邊對齊，至關於0%, 0
   • 關鍵詞center：表示背景圖片在原點矩形上下居中，至關於50%
   • 關鍵詞bottom：表示背景圖片的底部和原點矩形的底邊對齊，至關於100%
3. 總結一下就是：絕對值用來控制圖片移動距離，百分比值控制圖片對齊方式，關鍵詞值是對齊方式的簡寫形式。

3）background-repeat

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

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

1. repeat-x, repeat-y, repeat
   是瀏覽器默認的行爲：從上到下，從左到右，背景圖片可能會發生剪切
2. space
   space讓背景圖片在不發生剪切的狀況下儘量多的重複，若是有多餘的空隙，則均分在各個背景圖片之間。
   注意space只是保證原點矩形內背景圖片不發生剪切，對於那些不在原點矩形外的背景區域仍是經過剪切的方式進行重複
3. round
   round跟space相似，可是若是有多餘的空隙則背景圖片經過縮放的方式侵佔空隙。
   拉伸：多餘的空間小於背景圖片一半
   壓縮：多餘的空間大於背景圖片的一半
   注意round跟space相似，round也只是保證原點矩形內背景圖片不發生剪切，對於那些不在原點矩形外的背景區域仍是經過剪切的方式進行重複。

4）background-size

背景圖片可能具備原始的尺寸，能夠經過background-size指定背景圖片的大小，進而能夠對背景圖片進行縮放操做。

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

1. auto表示使用圖片的自己的尺寸；

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

   • 絕對值
     指定具體的值
   • 百分比
     相對於原點矩形的尺寸計算
3. cover
   首先保證背景圖片平鋪整個繪製區域，若是背景圖片小，則經過等比例方式拉伸
4. contain
   首先保證背景圖片完整顯示背景圖片，若是背景圖片大，則經過等比例方式縮小

5) background-blend-mode

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

6) background-attachment

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

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

1. scroll: 表示背景圖片相對於元素自己固定，即它會隨着被應用元素的滾動而滾動；
2. fixed: 表示背景圖片相對於元素的視口固定，即它不會隨着被應用元素的滾動而滾動；
3. local: 表示背景圖相對於應用元素的內容而固定，即若是被應用元素的內容有滾動，則其會隨着被應用元素的內容滾動而滾動（注意和fixed區別）。

7) background

簡寫格式

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

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

1. 先肯定背景類型
2. 若是是圖片，則肯定圖片的屬性（位置，大小，重複方式，繪製起始點）
3. 肯定繪製區域
4. 背景圖片固定方式

4、總結

1. 繪製元素背景的條件：

   • 首先要肯定背景區域；
   • 肯定背景類型：顏色、圖片；
   • 若是是圖片還能夠更細緻的控制。
2. 除了background-clip能夠應用於background-color其餘屬性都是用於background-image的；
3. 若是background-clip取值爲border-box，則border會覆蓋在background上面，即border的顏色或者圖片會覆蓋背景顏色或者圖片。