这篇文章发布于 2010年04月9日,星期五,20:37,归类于 CSS相关。 阅读 460765 次, 今日 3 次 23 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=743
一、有点俗态的开场白
要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。
本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5。
本文地址: http://www.zhangxinxu.com/wordpress/?p=743
二、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>
结果如下图:
三、Firefox浏览器下的渐变背景
对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,在之前文章我详细介绍了Firefox3.6下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradient在Firefox3.6下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码:
.gradient{ width:300px; height:150px; background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); } <div class="gradient"></div>
此段代码在Firefox3.6浏览器下的效果是:
本文地址: http://www.zhangxinxu.com/wordpress/?p=743
四、chrome/Safari浏览器下的渐变背景实现
对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法,css-gradient,具体为-webkit-gradient,使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍,您可以狠狠地点击这里:CSS gradient渐变之webkit核心浏览器下的使用 。具体使用就不详述了,参见下面的代码:
.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浏览器下的效果是:
本文地址: http://www.zhangxinxu.com/wordpress/?p=743
补充于2011-04-07
Opera11也支持了CSS3渐变。其用法与Firefox一致,需要使用-o-
的前缀。另外,Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。
五、综合 – 兼容性的渐变背景效果
相关代码如下:
.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>
效果分别为上面三个分类的截图。
您可以狠狠地点击这里:兼容性的渐变背景效果demo
六、结语
CSS3的潜力非常的大,就渐变这一块可以创建很多精湛的UI效果,而以往这些效果都只能使用图片实现。CSS渐变背景的实现可以有效降低网页的图片数,也就是降低了HTTP请求,是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味,得使用资源消耗很高的滤镜才能实现渐变效果。所以,目前而言,渐变背景的的应用与否还是有待于利弊权衡的。
本文为原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=743
(本篇完)
- CSS gradient渐变之webkit核心浏览器下的使用 (0.614)
- CSS渐变之CSS3 gradient在Firefox3.6下的使用 (0.455)
- CSS页面重构“鑫三无准则”之“无图片”准则 (0.437)
- CSS3&HTML5各浏览器支持情况一览表 (0.372)
- PIE使IE支持CSS3圆角盒阴影与渐变渲染 (0.366)
- CSS实现跨浏览器的box-shadow盒阴影效果(2) (0.331)
- 实现兼容性的CSS粗虚线边框(dashed)效果 (0.283)
- CSS conic-gradient()锥形渐变简介 (0.283)
- 关于Google圆角高光高宽自适应按钮及其拓展 (0.267)
- CSS3 transition实现超酷图片墙动画效果 (0.265)
- CSS3无前缀脚本prefixfree.js及Animatable介绍 (RANDOM - 0.013)
IE10+ 需要用:background: -ms-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
文章挺好的
若是45°的渐变用filter怎么去写?
旋转一下呗
张老师,我用ie打开你的demo并没有效果呀???
主要是好像所有的ie都不兼容
我的也是.
透明度渐变也不行
经过试用,发现要实现透明度加渐变,可以直接试用下面的代码,渐变中的颜色值可以包含十六进制的透明度值,并且这些都要用引号包起来。
-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(Startcolorstr=’#CC340A5F’,Endcolorstr=’#FF16022B’)”;
老师,IE下filter:alpha滤镜,透明度渐变没有效果。也试了下filter: progid:DXImageTransform.Microsoft.alpha,又将括号里的空格换成了英文逗号,甚至将参数首字母改成了大写,都没有作用,不知问题在哪里,求解。
张老师,这种写法不兼容IE11啊
IE的渐变滤镜gradientType=’1’,只有0和1。请问下左上角到右下角的渐变怎么来写。
推荐使用http://buttoncssgenerator.com ,可以生成各种效果的按钮css,包括圆角、渐进颜色、阴影,并兼容各大主流浏览器
首先,先谢谢作者了,关于透明渐变,是直接支持透明写法的
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
如果要透明可以下如下
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=’#7FFFFFFF’,endcolorstr=’#7FFF0000′,gradientType=0);
这个写法和兼容RGBA的写法一模一样,可以类推,其它只要涉及颜色的滤镜应该都支持这么写,当然,如果要兼容径向渐变还是需要你上面的写法
ie的滤镜是不错,但是会增加css渲染吗?
我现在用的pie也是把双刃剑啊~
大师,我还想请问下。你这个渐变的效果我整体背景已经能实现了。为什么用到表格里面去就不行了呢?我直接外部div调用是那个渐变效果从网页顶端开始的,但是加到table里去就根本没法实现了。
大师,我想问下。我想借用你的代码做我网页背景的渐变效果,但是为什么我长宽设置成100%之后还是有白边。
@沈囡囡 会不会是没有添加
body{margin:0;}
呢?在IE上使用滤镜的方案对效率有多大影响?这东西有统计数据嘛?如果只是消耗CPU,我倒感觉不是什么很大问题,现在PC上的CPU越来越快。
ie下面如果加了边框,边框也会透明
谢啦哈!
麻烦问下
-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);
这代码中-ms-filter有啥作用啊?
谢谢啦
@cheng filter为IE滤镜,-ms-为IE私有前缀,连起来据说好像只让IE8+浏览器认得~~