公告:攜程招聘java、前端、測試、產品等,請發簡歷至[email protected],幫內推!

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

159429次瀏覽

引子

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

題外話

關于css3的background,功能很強大,有很多屬性,像background-size等等,這些屬性都可以寫一篇博客來講述。關于css3background的其他屬性,后面會出博客來單獨講述!

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。

兼容性:

enter image description here

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

效果如下圖:

enter image description here

左上角漸變

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

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

效果如下

enter image description here

漸變方向寫法組合:

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

關于”css3實現一個div設置多張背景圖片及background-image屬性“今天就寫到這里,有問題可以相互交流,加油!

相關文章:

任选9场吧