CSS3實現背景顏色線性漸變gradient

Mozilla

僅針對FireFoxweb

1
background : -moz-linear-gradient( top , #eee , #aaa );

linear 表示線性,參數top表示從頂部開始,參數#eee表示開始顏色,#aaa表示結束顏色後端

效果:瀏覽器

Webkit

解決:Chrome 、Safarispa

1
background : -webkit-gradient(linear, 0 0 , 0 100% , from( #eee ), to( #aaa ));

linear 表示線性、0 0 表示開始位置的x與y的位置,0 100%表示結束的xy位置,from(#eee)表示從這個顏色開始,to(#aaa)表示漸變到這個顏色code

Chrome:orm

Safari:圖片

Opera

代碼:ci

1
background : -o-linear-gradient( top , #eee , #aaa );

同Mozilla同樣用法,只不過前綴-moz修改爲-o便可資源

效果:it

IE9 and IE 10

代碼:

1
background : -ms-linear-gradient( #eeeeee 0% , #aaaaaa 100% );

#eeeeee 0% 表示從什麼顏色位置開始,#aaaaaa 100%表示到什麼顏色以及結束位置

IE9:

IE10:

IE7 and IE8

這個兩個瀏覽器使用的事濾鏡,跟CSS3沒有半毛關係,只不過能在低端IE中解決這個問題也是解決兼容的一個作法,但注意不要大量使用,耗資源!

IE7代碼:

1
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= '#eeeeee' ,endColorstr= '#aaaaaa' ,grandientType= 1 );

startColorstr開始顏色,endColorstr結束顏色,grandientType漸變方向

IE7效果:

IE8代碼:

1
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= '#eeeeee' ,endColorstr= '#aaaaaa' ,grandientType= 1 );

參數同IE7相似,只不過在filter加了一個-ms-前綴

IE8效果:

整合兼容

咱們把各個瀏覽器的背景顏色漸變都寫上就解決各瀏覽器間的背景顏色漸變了

1
2
3
4
5
6
background : -webkit-gradient(linear, 0 0 , 0 100% , from( #eee ), to( #aaa )); /** Chrome Safari **/
background : -moz-linear-gradient( top , #eee , #aaa ); /** FireFox **/
background : -o-linear-gradient( top , #eee , #aaa );  /** Opear **/
background : -ms-linear-gradient( #eeeeee 0% , #aaaaaa 100% );  /** IE9 IE10 **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= '#eeeeee' ,endColorstr= '#aaaaaa' ,grandientType= 1 ); /** IE7 **/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= '#eeeeee' ,endColorstr= '#aaaaaa' ,grandientType= 1 ); /** IE8 **/

但爲了要一個通用的背景漸變要寫六行代碼,不見得比圖片省事,要麼也能夠結合後端語言作一個功能,輸入漸變的起始顏色與結束顏色後生成以上代碼。各有所長,看心態吧!

相關文章
相關標籤/搜索