- 浏览: 3351417 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸:
你好博主,这个不是很理解,能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站:
写得不错,可以看这里,和这里的这篇文章一起看,有 ...
jquery 遍历对象、数组、集合 -
xue88ming:
很有用,谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC:
厉害,困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意,用$而不是# -
TopLongMan:
非常好,很实用啊。。
PostgreSQL递归查询实现树状结构查询
http://www.zhangxinxu.com/wordpress/2010/04/css%E5%AE%9E%E7%8E%B0%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E6%B8%90%E5%8F%98%E8%83%8C%E6%99%AFgradient%E6%95%88%E6%9E%9C/
一、有点俗态的开场白
要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。
本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5。
二、IE浏览器下的渐变背景
IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码:
相关说明:
上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。
上面代码实现的是红色至蓝色的渐变,但是不含透明度变化,这是由于IE目前尚未支持opacity属性以及RGBA颜色,要实现IE下的透明度变化,还是需要使用IE滤镜,IE的透明度滤镜功能比较强大,这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用:
其中各个参数的含义如下:
opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征:
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。
综合上述,实现IE下含透明度变化红蓝垂直渐变的代码如下:
结果如下图:
IE6下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活
三、Firefox浏览器下的渐变背景
对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,在之前文章我详细介绍了Firefox3.6下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradient在Firefox3.6下的使用 。这里我就不再具体讲述了,对于本文开头提到的要实现的效果的实现可以参见下面的代码:
此段代码在Firefox3.6浏览器下的效果是:
Firefox3.6下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活
四、chrome/Safari浏览器下的渐变背景实现
对于webkit核心的浏览器,如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法,css-gradient,具体为-webkit-gradient,使用语Firefox浏览器是有一些差异的。我在上上一篇文章对此进行了非常详细的介绍,您可以狠狠地点击这里:CSS gradient渐变之webkit核心浏览器下的使用 。具体使用就不详述了,参见下面的代码:
此段代码在Safari 4浏览器下的效果是:
Safari下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活
补充于2011-04-07
Opera11也支持了CSS3渐变。其用法与Firefox一致,需要使用-o-的前缀。另外,Chrome的渐变用法也开始向FireFox浏览器下的用法靠拢。
五、综合 – 兼容性的渐变背景效果
相关代码如下:
效果分别为上面三个分类的截图。
您可以狠狠地点击这里:兼容性的渐变背景效果demo
六、结语
CSS3的潜力非常的大,就渐变这一块可以创建很多精湛的UI效果,而以往这些效果都只能使用图片实现。CSS渐变背景的实现可以有效降低网页的图片数,也就是降低了HTTP请求,是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味,得使用资源消耗很高的滤镜才能实现渐变效果。所以,目前而言,渐变背景的的应用与否还是有待于利弊权衡的。
一、有点俗态的开场白
要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。
本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5。
二、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>
结果如下图:
IE6下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活
三、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浏览器下的效果是:
Firefox3.6下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活
四、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浏览器下的效果是:
Safari下含半透明的渐变背景效果 张鑫旭-鑫空间-鑫生活
补充于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浏览器一直蹲在茅厕边啃鸡腿——自以为美味,得使用资源消耗很高的滤镜才能实现渐变效果。所以,目前而言,渐变背景的的应用与否还是有待于利弊权衡的。
发表评论
-
echart使用记录
2016-06-22 09:24 1752ECharts详细说明 http://elang0705.it ... -
jQuery Backstretch动态设置背景图片插件
2016-05-29 02:41 1517原文: http://www.2cto.com/kf/2014 ... -
自动 CSS 回归测试工具 BackstopJS
2016-05-03 09:48 1171http://www.oschina.net/p/backst ... -
用CSS开启硬件加速来提高网站性能
2016-04-19 09:06 1161http://www.cnblogs.com/PeunZhan ... -
css3旋转的大风车动画特效
2016-04-18 16:26 1225http://www.oschina.net/code/sni ... -
CSS实现垂直居中的常用方法
2016-04-15 13:32 962http://my.oschina.net/agileai/b ... -
固定大小的div 自适应显示图片
2016-04-13 10:29 1411http://www.oschina.net/code/sni ... -
pageSwitch-支持121种过渡效果的JavaScript页面切换插件
2016-04-10 01:25 1559介绍: http://www.htmleaf.com/jQue ... -
CSS3效果或插件收集
2016-04-09 14:17 1584资源网站: 懒人之家 http://www.lanrenzh ... -
Dropzone JS 使用指南(文件拖拽上传)
2016-04-08 13:25 4282JavaScript 文件拖拽上传插件 dropzone.js ... -
纯CSS3多层云彩变换动画特效
2016-04-06 14:13 953原文: http://hovertree.com/h/bjaf ... -
如何将页脚固定在页面底部
2016-04-05 10:36 978http://www.w3cplus.com/css/css- ... -
纯CSS实现箭头,圆点, 三角形
2016-03-30 13:44 1998http://my.oschina.net/u/2362038 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 932[HTML5]Notification桌面提醒功能 http: ... -
css3总结笔记
2016-03-18 11:50 494http://my.oschina.net/u/2460148 ... -
html上传图片之前在网页预览实现
2016-03-16 10:40 996HTML5之FileReader的使用 http://blog ... -
20 个 CSS 高级技巧汇总
2016-03-16 10:11 960http://my.oschina.net/u/2460148 ... -
CSS实现垂直居中的常用方法
2016-03-15 17:12 1001详细过程见原文http://www.cnblogs.com/y ... -
Jquery获取窗口高度
2016-03-15 12:48 921http://my.oschina.net/moks/blog ... -
三种三栏网页宽度自适应布局方法
2016-03-15 09:42 926http://my.oschina.net/zhangxuma ...
相关推荐
要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全...
纯css3 gradient属性制作6种渐变色的按钮样式
使用CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片。下面是实现效果示例,相比以上方案优点是不使用图片,减小请求量和流量
CSS 设计指南学习小结
今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前,渐变效果和阴影、圆角效果一样都是做成图片,直接编写 CSS 代码就可以实现。
纯css3 gradient颜色渐变立体文字特效代码
我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 图像。它是css3中的语法,最低兼容IE10 background-image: linear-gradient(to right, #ff9000, #ff5000); direction:用于...
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
而现在, 使用 CSS就可以创造出各种渐变效果了。渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用 background-image 属性 CSS Code复制内容到剪贴板 ’gradient1′> ’gradient2′> ’gradient3′> CSS...
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果。 CSS3渐变属性 css3中定义了两种渐变类型:线性渐变和径向渐变。线性渐变是指两个或者两个...
background-image: conic-gradient(from angle at position, start-color, …, last-color ) 第一个参数: from angle :起始的角度,可选,默认为从上到下 position :圆锥锥点的位置 第二个参数: start-color :...
兼容IE与firefox的css 线性渐变(linear-gradient)实现代码,需要的朋友可以参考下
大佬给了一张优惠券图片(如下图),我一看,这波浪型的边框和内倒角用css写不出来吧,遂向大佬说明并要ui切图,大佬回答:css3可以实现。好吧,大佬都说可以实现了,还不赶紧去求谷哥,度娘。 实现内倒角 上代码,...
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。线性渐变在Webkit下的应用 CSS Code复制内容到剪贴板 -webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法 第...
跟线性渐变一样,一组颜色设定表示渐变过程。没什么好讲的,后面将统一用 [red, #fff 99%, blue] 这个渐变组合,表示从红色变换到白色,最后以一个1%蓝色结束,方便查看边缘。 用法 background-image:radial-...
网站中背景色是纯色,如果我们需要渐变背景,就可以把纹理的背景色设置为透明色,然后把父元素的背景图设置为渐变效果~ html,body{ background: #000; min-width: 1024px; background-image: linear-gradient(to...
CSS 关于背景渐变和自动全屏的问题 主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖 但按下了F11的时候崩溃的世界开始了 所以这篇文章主要介绍CSS背景渐变色和自动全屏适应 ...