本文转载于:猿2048网站CSS实现兼容性的渐变背景(gradient)效果php
IE浏览器下的渐变背景css
IE浏览器下渐变背景的使用须要使用IE的渐变滤镜。以下代码:web
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1); chrome
相关说明:浏览器
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1表明横向渐变,gradientType=0表明纵向淅变。startcolorstr=”色彩” 表明渐变渐变起始的色彩,endcolorstr=”色彩” 表明渐变结尾的色彩。wordpress
上面代码实现的是红色至蓝色的渐变,可是不含透明度变化,这是因为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) spa
其中各个参数的含义以下:code
opacity表示透明度,默认的范围是从0 到 100,他们实际上是百分比的形式。也就是说,0表明彻底透明,100表明彻底不透明。
finishopacity 是一个可选参数,若是想要设置渐变的透明效果,就能够使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征:
0 表明统一形状
1 表明线形
2 表明放射状
3 表明矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。orm
综合上述,实现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>
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>
此段代码在Firefox3.6浏览器下的效果是:
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>
此段代码在Safari 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>