CSS3總結二：（background）背景/漸變色函數

• background-color(CSS2)
• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin
• background-clip

 一、背景漸變色（取值單位-圖像）

• linear-gradient() ==》路徑漸變
• radial-gradient() ==》經向漸變
• repeating-linear-gradient()==》 重復路徑漸變
• repeating-radial-gradient()==》 重復徑向漸變

1.1這四個顏色漸變函數的兼容性都一樣，先來看路徑漸變linear-gradient()的幾個個背景漸變色的示例：

 

 

 

 

 

 示例的漸變色函數代碼：

1 background-image: linear-gradient( #CD853F, #CD69C9);/* 默認方向自下向上 */
2 background-image: linear-gradient(to left,#CD853F, #CD69C9);/* 自右向左 */
3 background-image: linear-gradient(to left,#CD853F 50px, #CD69C9); /* 自右向左 起始顏色在50px位置開始漸變 */
4 background-image: linear-gradient(to top left,#CD853F , #CD69C9);/* 自右下向左上漸變 */
5 background-image: linear-gradient(30deg , #CD853F , #CD69C9);/* 30度位置開始漸變 */

語法：linear-gradient(漸變角度，起始顏色 起始漸變位置，結束顏色 結束漸變的位置)；

漸變角度可以直接設置單一方向(left)，也可以設置復合方向(top left)，還可以設置度數(30deg);起始位置和結束位置除了示例中使用的像素位置還可以使用百分比。

1.2經向漸變radial-gradient()的漸變示例：

 

 

 

 

 

 示例的漸變色函數代碼：

 1 /* 起始漸變色,結束漸變色 -- 其他所有值默認*/
 2 background-image: radial-gradient( #ff0,#009);
 3 /* 起始漸變色 起始漸變位置(可以設置像素值百分比),結束漸變色 結束漸變位置*/
 4 background-image: radial-gradient(#ff0 20px, #009 90px);
 5 /* 擴散形狀為圓形(默認橢圓ellipse), 起始漸變色 起始漸變位置, 結束漸變色 結算漸變位置 */
 6 background-image: radial-gradient(circle,#ff0 20px, #009 70px);
 7 /* 擴散形狀圓形 at 圓心位置在左上角(可以設置像素值百分比), 起始漸變色 起始漸變位置, 結束漸變色 結算漸變位置 */
 8 background-image: radial-gradient(circle at top left,#ff0 0px, #009 230px);
 9 /* 擴散形狀圓形 半徑大小(到最近的邊) at 圓心位置在50px*² , 起始漸變色 起始漸變位置, 結束漸變色 結算漸變位置 */
10 background-image: radial-gradient(circle closest-side at 50px 50px,#ff0 20px, #009 70px);
11 /* 半徑大小共有四個值分別是： */
12 closest-side：半徑距離從圓心到最近的邊的距離
13 closest-corner：半徑距離從圓心到最近的角的距離
14 farthest-side：半徑距離從圓心到最遠的邊的距離
15 farthest-corner：半徑距離從圓心到最遠的角的距離

 1.3repeating-linear-gradient()在linear-gradient()基礎上增加了重復平鋪的效果：

語法：repeating-linear-gradient(漸變方向, 起始顏色  [這里可以設置從什么地方開始漸變，沒有漸變的部分被結束漸變色填充，這部分寬度會被計入一組漸變色內(如果超出一組漸變色的寬度整個背景就變成了結束漸變色的純色填充)]， 過渡顏色  [這里可以設置純色的寬度]，結束顏色  一組漸變色所占的寬度)

/* 被一組漸變色填充： 自上向下漸變，起始漸變色 開始漸變的位置是top 5px，中間過渡色，結束漸變色 */
background-image: repeating-linear-gradient(to bottom, #aff 5px, #FFC125 ,#FF1493);
/* 自右向左漸變，起始漸變色 5像素后漸變，過渡色 過渡色保持3像素純色， 結束漸變色 每組漸變色占20%寬度*/
background-image: repeating-linear-gradient(to left, #aff 5px, #FFC125 3px,#FF1493 20%);

1.4repeating-radial-gradient()的實現邏輯和repeating-linear-gradient()基本一致，一個采用寬度分組，一個采用半徑分組。起始色的起始漸變都有基礎漸變模式的其實色填充變成了重復平鋪的結束漸變色填充，中間過渡色的起始漸變位置變成了中間漸變色的純色寬度，結束漸變色的結束位置變成了每組漸變色的寬度。（重點解析：repeating-模式與普通漸變色的模式的區別）

/* 徑向漸變的形狀為圓形，起始漸變色 從5像素位置開始填充起始色，中間過渡色 中間過渡色的純色寬度，結束漸變色 每組漸變色的寬度為30% */
background-image:repeating-radial-gradient(circle,#ff0 5px,#ffc125 15px,  #009 30%);

 二、背景圖片（URL的使用）

 background-image多圖片的盒模型渲染原理與實際開發應用：

 

 

 

 

 

 以上示例的代碼：

 1 div{
 2     width: 100px;
 3     height: 120px;
 4 }
 5 .div1{
 6     background-image: url('manQQ'),url('womanQQ');
 7     background-size: 100px 120px;/* 這里表示設置兩個背景圖片大小都是100px*120px */
 8 }
 9 .div2{
10     background-image: url('womanQQ'),url('manQQ');
11     background-size: 100px 120px,100px 120px;
12 }
13 .div3{
14     background-image: url('manQQ'),url('womanQQ');
15     background-size: 500px 120px,50px 120px;
16     background-position: 0px 0px，50px 0px; 
17     background-repeat: no-repeat;
18 }
19 .div4{
20     background-image: /*url('manQQ'),*/url('灰QQ');/* 用注釋模擬加載失敗 */
21     background-size: 100px 120px；
22 }

根據上面四個示例的演示與盒模型來說：

1.background-image多url的渲染原理是盒模型的背景疊層渲染，按照rul的引入順序從上至下疊層。所以，demo1當設置背景圖片大小都為元素大小時，只能看到第一張圖片。demo2的樣式設置印證了這一點。

2.bockground-repeat的默認狀態是repeat;所以即使設置background-size的寬度為元素的一個半只能看到兩個第一張圖片的縮放效果，所以在demo3中將bockground-repeat的值設置為no-repeat，然后通過background-position將兩個背景圖片定位到相應的位置就得到了最后的效果。

3.在實際開發應用中，background-image更多的是為了增強體驗，給元素一個像素較小的背景圖放到主背景圖后面，當網速較慢時較小的替代圖片會先加載到頁面，讓頁面看起來被正常渲染了。還有一種情況就是主圖加載出錯導致無法正確加載到頁面，這時候替代圖片也同樣起到了增強體驗的效果。（demo4）

 三、背景圖片（起始位置與結束位置、repeat的值設置注意事項）

• background-origin
• background-clip

3.1先來看引用圖片背景，其他背景屬性都為默認值時的效果：

從效果圖上可以看到背景圖片的起始位置是pading區域，但是border的top邊框和left邊框被反向填充了，這是由repead的重復填充形成的效果。因為repeat的默認值是repeat。background-origin的默認值是：padding-box;而background-clip的默認值是border-box;但是border-right和border-bottom的區域是由內區域延申填充。

/* background的默認屬性 */
background-origin: padding-box;
background-clip: border-box;
background-repeat: repeat;

3.2接着將background-clip(背景圖片結束位置)設置為padding-box:

當background-origin和background-clip的值都為padding-box時，border上就都沒有了背景圖片。

/* background的起始結束位置都為padding-box時 */
background-origin: padding-box;
background-clip: padding-box;
background-repeat: repeat;

3.3繼續來看結束位置的變化影響，當起始位置為padding-box，而結束位置為content-box時的效果圖：

由此可見background-origin的起始位置實質上是為background-position設定參考位置，而background-clip是設定實質可見背景區域(向外的部分被修剪)。

background-origin: padding-box;
background-clip: content-box;
background-repeat: repeat;

3.4最后說明一下background-repeat的屬性值的設置方式：

background-repeat: repeat;/*同等於*/background-repeat: repeat-x repeat-y;/*但是實質上不能出現這種寫法*/
background-repeat: repeat-x;/*同等於*/background-repeat: repeat-x no-repeat;/*但是實質上不能出現這種寫法*/
background-repeat: repeat-y;/* 同等於*/background-repeat: no-repeat repeat-y;/*但是實質上不能出現這種寫法*/
background-repeat: round;/*不能以整數次平鋪時適度縮放背景圖片*/background-repeat: round round;/*這兩種寫法一樣*/
background-repeat: space;/* 不能整數平鋪時均勻留白 */background-repeat: space space;/*這兩種寫法一樣*/
background-repeat: round space;/* 表示不能整數次平鋪時橫向適度縮放 縱向均勻留白*/

 四、background-clip的text值的使用（webkit的專屬屬性）

background-clip的text表示使用文本裁剪圖片，文字最終以裁剪的圖片內容填充，但是這個屬性值的兼容性不是很好，pc端只有webkit瀏覽器兼容，移動端的瀏覽器兼容性還不錯。由於考慮到瀏覽器的兼容，我只能提供代碼和效果圖，不能在富文本編輯中使用代碼來實現這一效果：

 

 五、background-attachment（當滾動時，背景圖片相對誰定位）

• fixed：背景圖片相對於視口固定
• scroll：背景圖片相對於元素固定
• local：背景圖片相對於元素內容固定

 先來看background-attachment的默認值scroll的效果圖：

  

 scroll固定在元素上的效果比較直觀，接着來看local和fixed的效果圖：

 

前面一個是local的效果，后面一個是fixed的效果。local相對內容固定，跟隨內容滾動而滾動。fixed相對可視窗口固定，當可視窗口滾動時跟隨滾動，但是當元素在窗口上不可見時背景圖片還是會被渲染的疊層關系覆蓋。

最后隨便在這里看一下background-size的兩個特殊值的效果：cover和contain。cover的效果是用一張圖片將元素背景全部填充滿，背景圖片比例較大的那個方向會被切割一部分。contain的效果是用一種圖片盡可能的填充元素的全部背景，背景圖片比例較小的那個方向在元素上會出現留白。如果比例相同那兩個效果都一樣，都是剛好填充滿元素。