CSS3背景颜色渐变效果

1、firefox浏览器：

background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff);

2、safari、chrome浏览器：

background-image: -webkit-gradient(linear, % %, % %,from(#eef9fe), to(#d1ecff));

3、Opera浏览器：

background-image: -o-linear-gradient(top , #eef9fe, #d1ecff);

4、IE浏览器：

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,gradientType=);

注意：其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。

上面IE浏览器代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用：

 filter:alpha(opacity= finishopacity= style= startx=,starty=,finishx=,finishy=)

 opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 
 finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
 style用来指定透明区域的形状特征：
 0 代表统一形状
 1 代表线形
 2 代表放射状
3 代表矩形。
 startx 渐变透明效果开始处的 X坐标。
  starty 渐变透明效果开始处的 Y坐标。 
 finishx 渐变透明效果结束处的 X坐标。 
 finishy 渐变透明效果结束处的 Y坐标。

综上所述：在IE浏览器中要实现既含有透明度又含有渐变的效果的话，CSS代码如下：

filter:alpha(opacity= finishopacity= style= startx=,starty=,finishx=,finishy=) 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#eef9fe,endcolorstr=#d1ecff,gradientType=);

 -ms-filter:alpha(opacity= finishopacity= style= startx=,starty=,finishx=,finishy=) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=);

秒客网

CSS3背景颜色渐变效果

相关文章