合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

HTML5实现兼容性的渐变背景(gradient)效果

2012-04-04 09:41:08网站设计

IE浏览器下的渐变背景bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码:bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

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

相关说明:bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

上面代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用:bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

filter:alpha(opacity=100 finishopacity=0 style=1 
startx=0,starty=5,finishx=90,finishy=60)

其中各个参数的含义如下:bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
style用来指定透明区域的形状特征:bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
0 代表统一形状bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
1 代表线形bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
2 代表放射状bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
3 代表矩形。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
startx 渐变透明效果开始处的 X坐标。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
starty 渐变透明效果开始处的 Y坐标。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
finishx 渐变透明效果结束处的 X坐标。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
finishy 渐变透明效果结束处的 Y坐标。bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

综合上述,实现IE下含透明度变化红蓝垂直渐变的代码如下:bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

.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>

结果如下图:bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

IE6下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活bg6合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

本文关键词
HTML5,渐变背景,css