濾鏡漸層使用 IE瀏覽器

1. IE瀏覽器下的漸層背景使用漸層濾鏡

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

相關說明：
上面的濾鏡代碼主要有三個參數，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表橫向漸層，gradientType=0代表縱向淅變。startcolorstr=”色彩” 代表漸層漸層起始的色彩，endcolorstr=”色彩” 代表漸層結尾的色彩。

上面代碼實現的是紅色至藍色的漸層，但是不含透明度變化，這是由於IE目前尚未支援opacity屬性以及RGBA顏色，要實現IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強大，這種強大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸層的用法類似。例如下面的使用：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
opacity表示透明度，預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity 是一個選擇性參數，如果想要設定漸層的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
style用來指定透明地區的形狀特徵：
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸層透明效果開始處的 X座標。
starty 漸層透明效果開始處的 Y座標。
finishx 漸層透明效果結束處的 X座標。
finishy 漸層透明效果結束處的 Y座標。

實現IE下含透明度變化紅藍垂直漸層的代碼如下：
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}

<div class="gradient"></div>

2、Firefox瀏覽器下的漸層背景

對於Firefox瀏覽器下(Firefox 3.6+)漸層背景的實現需使用CSS3漸層屬性，-moz-linear-gradient屬性

.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}

<div class="gradient"></div>

3.chrome/Safari瀏覽器下的漸層背景實現

對於webkit核心的瀏覽器，如Chrome/Safari瀏覽器下漸層背景的實現也是使用CSS3 漸層方法，css-gradient，具體為-webkit-gradient，使用語Firefox瀏覽器是有一些差異的。

.gradient{
width:300px;
height:150px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}

<div class="gradient"></div>

4.相容性的漸層背景效果

.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* 一些不支援背景漸層的瀏覽器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}

<div class="gradient"></div>

CSS3的潛力非常的大，就漸層這一塊可以建立很多精湛的UI效果，而以往這些效果都只能使用圖片實現。CSS漸層背景的實現可以有效降低網頁的圖片數，也就是降低了HTTP請求，是非常受用的。但是IE瀏覽器一直蹲在茅廁邊啃雞腿——自以為美味，得使用資源消耗很高的濾鏡才能實現漸層效果。所以，目前而言，漸層背景的的應用與否還是有待於利弊權衡的。