css3實現一個div設置多張背景圖片及background-image屬性

CSS3/CSS1 background-image 屬性

語法:

background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默認值：none

取值：

none：無背景圖。

< url >：使用絕對或相對地址指定背景圖像。

< linear-gradient>：使用線性漸變建立背景圖像。（CSS3）

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

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

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

說明：

設置或檢索對象的背景圖像。

若是設置了background-image，同時也建議做者設置background-color用於當背景圖像不可見時保持與文本必定的對比。

對應的腳本特性爲backgroundImage。

兼容性：

IE8及更早瀏覽器不支持CSS3 background-image，即不支持多背景和使用漸變做爲背景圖像。

IE9不支持CSS3新增參數值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >做爲背景圖像。

Opera11.50-11.51不支持CSS3新增參數值：< radial-gradient > |< repeating-radial-gradient >做爲背景圖像。

寫法：

css3設置多張背景圖片

css3設置多張背景圖片，能夠以下寫：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
                     url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
                     url("haorooms.jpg") 400px 201px no-repeat;

也能夠這麼寫：

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背景漸變

標準寫法

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

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

[]在正則中表示一個字符類，這裏，你能夠理解爲一個小單元。

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

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

background:linear-gradient(red, yellow);

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

+也是量詞，表示1個或者更多個。所以，終止顏色是不可缺乏的。例如：linear-gradient(red)是醬油命，白板。

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

水平漸變

{background-image:linear-gradient(left, red 100px, yellow 200px);}

效果以下圖：

左上角漸變

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

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

效果以下

漸變方向寫法組合：

left, right, top, bottom, left top, left bottom, right top, right， bottom

分別表示，從左往右，從右往左，從上往下，從下往上，從左上往右下，從……（都懂的，不全寫了）

固然，也能夠用angle角度來寫！

{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}

具體的樣式你們能夠嘗試着寫一下，看一下！不少狀況下，用了才知道！

注意：有很多效果加了-webkit前綴以及-moz前綴會展示的不同！

例如：

background-image:-webkit-linear-gradient(-45deg, red, yellow)

與

background-image:linear-gradient(-45deg, red, yellow)

在Chrome瀏覽器下的漸變方向竟然是相反的！可是45deg是正常的。Firefox瀏覽器下也是如此，有前綴和沒有前綴方向相反！咋回事？

緣由很簡單，CSS3目前仍是草案階段！

從瀏覽器去掉前綴先後的變化能夠推測，以前，W3C的漸變座標是與photoshop中一致的，可是，後來，因爲某些緣由，修改了。

至於什麼緣由，根據我草草的查找，可能與下面幾個關鍵字之一有聯繫：animation/transition動畫、write-mode書寫方向、flex box模型、以及radial-gradient漸變等。在這裏就不深刻研究了！

前綴兼容

基本的寫法以下：

 background-image: linear-gradient(top, #fff, #dededc);

可是爲了兼容，有時候要寫多個前綴，變成以下：

background-image: -ms-linear-gradient(top, #fff, #dededc);
    background-image: -moz-linear-gradient(top, #fff, #dededc);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dededc));
    background-image: -webkit-linear-gradient(top, #fff, #dededc);
    background-image: -o-linear-gradient(top, #fff, #dededc);
    background-image: linear-gradient(top, #fff, #dededc);