引子

以前做網(wǎng)頁布局的時(shí)候，一個(gè)div只能設(shè)置一張背景圖片，設(shè)置多個(gè)背景的話，要用多個(gè)div嵌套才能實(shí)現(xiàn)，這樣兼容性比較好。若您的網(wǎng)站要求兼容瀏覽器低版本，建議用這種方法。css3的出現(xiàn)，解決了一個(gè)div只能設(shè)置一個(gè)背景的問題，使一個(gè)div可以設(shè)置多個(gè)背景圖片。background-image還可以設(shè)置線性漸變，等效果。

題外話

關(guān)于css3的background，功能很強(qiáng)大，有很多屬性，像background-size等等，這些屬性都可以寫一篇博客來講述。關(guān)于css3background的其他屬性，后面會(huì)出博客來單獨(dú)講述！

CSS3/CSS1 background-image 屬性

語法:

background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默認(rèn)值：none

取值：

none：無背景圖。
< url >：使用絕對(duì)或相對(duì)地址指定背景圖像。
< linear-gradient>：使用線性漸變創(chuàng)建背景圖像。（CSS3）
< radial-gradient>：使用徑向(放射性)漸變創(chuàng)建背景圖像。（CSS3）
< repeating-linear-gradient>：使用重復(fù)的線性漸變創(chuàng)建背景圖像。（CSS3）
< repeating-radial-gradient>：使用重復(fù)的徑向(放射性)漸變創(chuàng)建背景圖像。（CSS3）

說明：

設(shè)置或檢索對(duì)象的背景圖像。
如果設(shè)置了background-image，同時(shí)也建議作者設(shè)置background-color用于當(dāng)背景圖像不可見時(shí)保持與文本一定的對(duì)比。
對(duì)應(yīng)的腳本特性為backgroundImage。

兼容性：

IE8及更早瀏覽器不支持CSS3 background-image，即不支持多背景和使用漸變作為背景圖像。
IE9不支持CSS3新增參數(shù)值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作為背景圖像。
Opera11.50-11.51不支持CSS3新增參數(shù)值：< radial-gradient > |< repeating-radial-gradient >作為背景圖像。

寫法：

css3設(shè)置多張背景圖片

css3設(shè)置多張背景圖片，可以如下寫：

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

標(biāo)準(zhǔn)寫法

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

上面這種CSS語法我們經(jīng)常見到，可能有人看不懂具體的意思，其實(shí)上面的些符號(hào)含義與正則表達(dá)式有很多一致之處：

[]在正則中表示一個(gè)字符類，這里，你可以理解為一個(gè)小單元。

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

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

background:linear-gradient(red, yellow);

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

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

<>中的是關(guān)鍵字，主要是讓開發(fā)人員知道這里應(yīng)該放些什么內(nèi)容。

水平漸變

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

效果如下圖：

左上角漸變

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

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

效果如下

漸變方向?qū)懛ńM合：

left, right, top, bottom, left top, left bottom, right top, right， bottom
分別表示，從左往右，從右往左，從上往下，從下往上，從左上往右下，從……（都懂的，不全寫了）
當(dāng)然，也可以用angle角度來寫！

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

具體的樣式大家可以嘗試著寫一下，看一下！很多情況下，用了才知道！

注意：有不少效果加了-webkit前綴以及-moz前綴會(huì)展現(xiàn)的不一樣！

例如：

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

background-image:linear-gradient(-45deg, red, yellow)
在Chrome瀏覽器下的漸變方向居然是相反的！但是45deg是正常的。Firefox瀏覽器下也是如此，有前綴和沒有前綴方向相反！咋回事？

原因很簡(jiǎn)單，CSS3目前還是草案階段！

從瀏覽器去掉前綴前后的變化可以推測(cè)，之前，W3C的漸變坐標(biāo)是與photoshop中一致的，但是，后來，由于某些原因，修改了。

至于什么原因，根據(jù)我草草的查找，可能與下面幾個(gè)關(guān)鍵字之一有聯(lián)系：animation/transition動(dòng)畫、write-mode書寫方向、flex box模型、以及radial-gradient漸變等。在這里就不深入研究了！

前綴兼容

基本的寫法如下：

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

但是為了兼容，有時(shí)候要寫多個(gè)前綴，變成如下：

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);

關(guān)于”css3實(shí)現(xiàn)一個(gè)div設(shè)置多張背景圖片及background-image屬性“今天就寫到這里，有問題可以相互交流，加油！

最新評(píng)論