css3 background-image

在css3之前，只能給元素設定一個背景圖片， 如果要實現多個背景圖片的效果，只能夠使用元素巢狀的方式。

但是css3的出現使得設定多個背景圖片變的輕鬆起來，使用background-image屬性就可以直接實現。

下面就介紹一下此屬性的用法，需要的朋友可以做一下參考。

語法結構:

[CSS] 純文字檢視 複製程式碼
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

引數解析:

（1）.none:無背景圖。

（2）.< url >:使用絕對或相對地址指定背景影像。

（3）.< linear-gradient>:使用線性漸變建立背景影像。（CSS3）

（4）.< radial-gradient>:使用徑向(放射性)漸變建立背景影像。（CSS3）

（5）.< repeating-linear-gradient>:使用重複的線性漸變建立背景影像。（CSS3）

（6）.< repeating-radial-gradient>:使用重複的徑向(放射性)漸變建立背景影像。（CSS3）

特別說明:

設定或檢索物件的背景影像。

如果設定了background-image，同時也建議作者設定background-color用於當背景影像不可見時保持與文字一定的對比。

對應的指令碼特性為backgroundImage。

瀏覽器相容性:

特別說明:

（1）.IE8及更早瀏覽器不支援CSS3 background-image，即不支援多背景和使用漸變作為背景影像。

（2）.IE9不支援:< linear-gradient >|< radial-gradient >|< repeating-linear-gradient >|< repeating-radial-gradient >。

（3）.Opera11.50-11.51不支援CSS3新增引數值：< radial-gradient > |< repeating-radial-gradient >作為背景影像。

設定多個背景圖:

css3設定多張背景圖片，可以如下寫:

[CSS] 純文字檢視 複製程式碼
background:url("CSS1_s.jpg") 0 0 no-repeat,
           url("CSS2_s.jpg") 200px 0 no-repeat,
           url("CSS3.jpg") 400px 201px no-repeat;

也可以這麼寫:

[CSS] 純文字檢視 複製程式碼
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;

css3背景漸變:

標準寫法:

[CSS] 純文字檢視 複製程式碼
background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面這種CSS語法我們經常見到，可能有人看不懂具體的意思，其實上面的些符號含義與正規表示式有很多一致之處：

[]在正則中表示一個字元類，這裡，你可以理解為一個小單元。

|表示候選。也就是“或者”的意思，要麼前面的，要麼就後面的。

?為量詞，表示0個或1個，言外之意就是，你可以不指定方向，直接漸變色走起。例如：

[CSS] 純文字檢視 複製程式碼
background:linear-gradient(red, yellow);

就是從上往下的紅黃條紋效果。

+也是量詞，表示1個或者更多個。因此，終止顏色是不可缺少的。

<>中的是關鍵字，主要是讓開發人員知道這裡應該放些什麼內容。

水平漸變:

[CSS] 純文字檢視 複製程式碼
{background-image:linear-gradient(left, red 100px, yellow 200px);}

效果圖如下:

左上角漸變:

那從(100px, 100px)到(200px, 200px)應該就是從左上角開始，寫法如下:

[CSS] 純文字檢視 複製程式碼
{background-image:linear-gradient(left top, red 100px, yellow 200px);}

效果圖如下:

漸變方向寫法組合：

[CSS] 純文字檢視 複製程式碼
left, right, top, bottom, left top, left bottom, right top, right， bottom
分別表示，從左往右，從右往左，從上往下，從下往上，從左上往右下，……

當然，也可以用angle角度來寫：

[CSS] 純文字檢視 複製程式碼
{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}