一、有點俗態的開場白

要是兩年前，實現“兼容性的漸變效果”這個說法估計不會被提出來的，那個時候，說起漸變背景，想到的多半是IE的漸變濾鏡，其他瀏覽器尚未支持，但是，在對CSS3支持日趨完善的今天，實現兼容性的漸變背景效果已經完全成為可能，本文就將展示如何實現兼容性的漸變背景效果。在眾多的瀏覽器中，目前不支持Opera瀏覽器。

本文實例效果都是同樣的效果，就是垂直漸變，起始顏色紅色，結束顏色藍色，結束的藍色的透明度是0.5。 

二、IE瀏覽器下的漸變背景

IE瀏覽器下漸變背景的使用需要使用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>