技術之路

站在代碼以外看技術

css3完成一個div設置多張配景圖片及background-image屬性

css3完成一個div設置多張配景圖片及background-image屬性

引子

之前做網頁結構的時刻,一個div只能設置一張配景圖片,設置多個配景的話,要用多個div嵌套能力完成,如許兼容性比擬好。若您的網站請求兼容閱讀器低版本,建議用這類辦法。css3的湧現,處理了一個div只能設置一個配景的成績,使一個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。

兼容性:
《css3完成一個div設置多張配景圖片及background-image屬性》

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

後果以下圖:
《css3完成一個div設置多張配景圖片及background-image屬性》
 
左上角突變

那從(100px, 100px)到(200px, 200px)應當就是從左上角開端,寫法以下:

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

後果以下
《css3完成一個div設置多張配景圖片及background-image屬性》
 
突變偏向寫法組合:

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屬性“明天就寫到這裏,有成績可以互相交換,加油!

點贊

揭櫫評論

電子郵件地址不會被公開。 必填項已用*標注