background-image：設置或檢索對象的背景圖像 background-repeat：設置或檢索對象的背景圖像如何鋪排填充 background-attachment：設置或檢索對象的背景圖像是隨對象內容滾動 還是固定的 background-origin：設置或檢索對象的背景圖像顯示的原點 background-clip：檢索或設置對象的背景向外裁剪的區域 background-size：檢索或設置對象的背景圖像的尺寸大小 Multiple background：檢索或設置對象的多重背景圖像 Css3 background 漸變
1.CSS3漸變
CSS3漸變類型 CSS3漸變共有2種：（1）線性漸變（linear-gradient）； （2）徑向漸變（radial-gradient）。
1、線性漸變 線性漸變，指的就是指在一條直線上進行漸變，在網頁中 大多數漸變效果都是線性漸變。
2、徑向漸變 徑向漸變，是一種從起點到終點顏色從內到外進行圓形漸 變（從中間向外拉，像圓一樣）。
一、線性漸變簡介
在CSS3中，線性漸變指的是一條直線上進行的漸變。在網頁中，大多數漸變效果都是線性漸變。
語法：
background:linear-gradient(方向，開始顏色，結束顏色);
說明：
線性漸變的方向取值有2種，一種是使用角度（deg），另外一種是使用關鍵字：
第2個參數和第3個參數，表示開始顏色和結束顏色，取值可以為關鍵字、十六進制顏色值、RGBA顏色等。
例1：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3線性漸變</title> <style type="text/css"> div { width:200px; height:150px; background:linear-gradient(to right,blue,yellow); } </style> </head> <body> <div></div> </body> </html>
分析： “background:linear-gradient(to right,blue,yellow);” 表示線性漸變方向為“從左到右”，開始顏色為藍色（ blue），結束顏色為黃色（yellow）。
如果使用“background:linear-gradient(to left,blue,yellow);”，在瀏覽器預覽效果如下：
二、徑向漸變簡介：
CSS3徑向漸變是圓 形或橢圓形漸變，顏色不再沿着一條直線漸變，而是從一個起點向所有方向漸變。
語法： background:radial-gradient(position ,shape size,start-color,stop-color)
說明：
position：定義圓心位置；
shape size：由2個參數組成，shape定義形狀（圓形或橢圓），size定義大小；
start-color：定義開始顏色值；
stop-color：定義結束顏色值；
position、shape size都是可選參數，如果省略，則表示該項參數采用默認值。大家要非常清楚這一點，不然這一節 的代碼你有可能看不懂。
start-color和stop-color為必選參數，並且徑向漸變可以有多個顏色值。
定義圓心位置position ；
position用於定義徑向漸變的圓心位置，屬性值跟background-position屬性值相似，也有2種情況：
（1）長 度值，如px、em或百分比等；（2）關鍵字。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3徑向漸變</title> <style type="text/css"> /*設置div公共樣式*/ div { width:200px; height:150px; line-height:150px; text-align:center; color:white; } #div1 { margin-bottom:10px; background:-webkit-radial-gradient(orange,blue); } #div2 { background:-webkit-radial-gradient(circle,orange,blue); } </style> </head> <body> <div id="div1">默認值（ellipse）</div> <div id="div2">circle</div> </body> </html>
定義大小size：size主要用於定義徑向漸變的結束形狀大小。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3徑向漸變</title> <style type="text/css"> /*設置div公共樣式*/ div { width:120px; height:80px; line-height:80px; text-align:center; color:white; } div+div { margin-top:10px; } #div1{background:-webkit-radial-gradient(circle closest-side,orange,blue);} #div2{background:-webkit-radial-gradient(circle closest-corner,orange,blue);} #div3{background:-webkit-radial-gradient(circle farthest-side,orange,blue);} #div4{background:-webkit-radial-gradient(circle farthest-corner,orange,blue);} </style> </head> <body> <div id="div1">closest-side</div> <div id="div2">closest-corner</div> <div id="div3">farthest-side</div> <div id="div4">farthest-corner </div> </body> </html>
開始顏色start-color和結束顏色stop-color
參數start-color用於定義開始顏色，參數stop-color用於定義結束顏色。
顏色可以為關鍵詞、十六進制顏色值、 RGBA顏色值等。 徑向漸變也接受一個顏色值列表，用於同時定義多種顏色的徑向漸變。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3徑向漸變</title> <style type="text/css"> div { width:200px; height:150px; background:-webkit-radialgradient(red,orange,yellow,green,blue); } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3徑向漸變</title> <style type="text/css"> div { width:200px; height:150px; line-height:150px; text-align:center; color:white; } #div1{background:-webkit-radial-gradient(red,green,blue);marginbottom:10px;} #div2{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);} </style> </head> <body> <div id="div1">顏色均勻分布</div> <div id="div2">顏色不均勻分布</div> </body> </html>
2.響應式背景圖片
1.background－size(對響應性圖片等比例縮放) background-size: 可以設定背景圖像的尺寸
基本語法：background-size: length | percentage | cover | contain;
一：length
該屬性值是設置背景圖像的寬度和高度的，第一個值是寬度，第二個值是設置高度的。如果只設
置第一個值，那么第二個值會自動轉換為 “auto”;
二：percentage
該屬性是以父元素的百分比來設置圖片的寬度和高度的，第一個值是寬度，第二個值是高度。
如果只設置一個值，那么第二個值會被設置為 “auto”;
三：cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
四：contain
把圖像擴展至最大尺寸，以使寬度和高度 完全適應內容區域。
在CSS3之前，背景圖片的大小是由圖片的實際大小決定的。 在CSS3中，我們可以使用background-size屬性來設置背景圖片的大小，這使得我們可以在不同的環境中 重復使用背景圖片。
語法： background-size:取值;
說明： background-size取值共有2種，一種是使用長度值（如px、百分比）； 另外一種是使用關鍵字。 background-size關鍵字取值如下表：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3 background-size屬性</title> <style type="text/css"> div { width:160px; height:100px; border:1px solid red; margin-bottom:10px; background-image:url("../App_images/lesson/run_css3/css3.png"); background-repeat:no-repeat; } #div2{background-size:cover;} #div3{background-size:contain;} </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>
當屬性 background-size的值為cover時，背景圖像按比例縮放， 直到覆蓋整個背景區域為止，但可能會裁剪掉部分圖像。 當屬性background-size的值為contain時，背景圖像會完 全顯示出來，但可能不會完全覆蓋背景區域。
對比：
cover 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
比對測試連接：http://wow.techbrood.com/fiddle/37279
2.背景定位：background-origin
在CSS3中，我們可以使用background-origin屬性來設置元素背景圖片平鋪的最開始位置。
語法：
background-origin:屬性值;
說明：
background-origin屬性取值如下：
測試連接：http://wow.techbrood.com/fiddle/39847
3.背景剪切：background-clip
在CSS3中，使用background-clip屬性來將背景圖片根據實際需要進行剪切。
語法：
background-clip:屬性值;
說明：
background-clip屬性取值如下表：
測試連接：http://wow.techbrood.com/fiddle/39848
4.background-position
設置背景圖像的起始位置。
這個屬性設置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復，將從這一點開始。
提示：您需要把 background-attachment 屬性設置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。
這是取值 其實就2個 一個x 一個 y。
多圖背景：background
多圖背景測試例子：http://wow.techbrood.com/fiddle/37659
3. CSS顏色
一、opacity屬性 在CSS3中，我們可以使用opacity屬性來控制元素的透明度。
語法： opacity:數值;
說明： opacity屬性取值范圍為0.0~1.0，0.0表示完全透明，1.0 表示完全不透明（默認值）。
opacity屬性取值不可以為負數。
透明度opacity屬性用得也比較廣泛，很多時候都是配合 :hover偽類來定義鼠標移動到某個按鈕或圖片上時，改變 透明度來呈現動態的效果。
二、RGBA顏色
語法： rgba(R,G,B,A)
參數A為透明度，類似opacity屬性，取值范圍在0.0~1.0之間，不可為負值。下面是RGBA顏色 的正確用法：