css實現背景圖片漸變

兼容ie6.7.8.9 firefox,safari,chrome 不兼容opera

css代碼：
.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);  
    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)));
}

上面的濾鏡代碼主要有三個參數，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1表明橫向漸變，gradientType=0表明縱向淅變。startcolorstr=」色彩」
表明漸變漸變起始的色彩，endcolorstr=」色彩」 表明漸變結尾的色彩。
opacity表示透明度，默認的範圍是從0 到 100，他們實際上是百分比的形式。
也就是說，0表明徹底透明，100表明徹底不透明。
finishopacity 是一個可選參數，若是想要設置漸變的透明效果，就可使用他們來指定結束時的透明度。
範圍也是0 到 100。
style用來指定透明區域的形狀特徵：
0 表明統一形狀
1 表明線形
2 表明放射狀
3 表明矩形。
startx 漸變透明效果開始處的 X座標。
starty 漸變透明效果開始處的 Y座標。
finishx 漸變透明效果結束處的 X座標。
finishy 漸變透明效果結束處的 Y座標

 

html代碼：
<div class="gradient"></div>

效果圖以下：

 

漸變工具：

http://www.colorzilla.com/gradient-editor/
http://samples.msdn.microsoft.com/workshop/samples/author/filter/DropShadow.htm