僅針對FireFoxweb
1
|
background
: -moz-linear-gradient(
top
,
#eee
,
#aaa
);
|
linear 表示線性,參數top表示從頂部開始,參數#eee表示開始顏色,#aaa表示結束顏色後端
效果:瀏覽器
解決:Chrome 、Safarispa
1
|
background
: -webkit-gradient(linear,
0
0
,
0
100%
, from(
#eee
), to(
#aaa
));
|
linear 表示線性、0 0 表示開始位置的x與y的位置,0 100%表示結束的x與y位置,from(#eee)表示從這個顏色開始,to(#aaa)表示漸變到這個顏色code
Chrome:orm
Safari:圖片
代碼:ci
1
|
background
: -o-linear-gradient(
top
,
#eee
,
#aaa
);
|
同Mozilla同樣用法,只不過前綴-moz修改爲-o便可資源
效果:it
代碼:
1
|
background
: -ms-linear-gradient(
#eeeeee
0%
,
#aaaaaa
100%
);
|
#eeeeee 0% 表示從什麼顏色位置開始,#aaaaaa 100%表示到什麼顏色以及結束位置
IE9:
IE10:
這個兩個瀏覽器使用的事濾鏡,跟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 **/
|
但爲了要一個通用的背景漸變要寫六行代碼,不見得比圖片省事,要麼也能夠結合後端語言作一個功能,輸入漸變的起始顏色與結束顏色後生成以上代碼。各有所長,看心態吧!