css中filter:alpha透明度使用小结兼容IE、火狐
发布时间:2014-03-27 17:18:33 作者:佚名 我要评论
使用Alpha可以设置透明度,FILTER:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大家可以参考下
Alpha,设置透明度。
用法:
FILTER:alpha(opacity=80);/* 设置不透明度为80 */
filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。
FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。
Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY:代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。
对于IE上述方法是没有问题的。若要支持firefox请参照下面:
程序代码
filter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)*/
简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。
用法:
复制代码
代码如下:FILTER:alpha(opacity=80);/* 设置不透明度为80 */
filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。
FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。
Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY:代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。
对于IE上述方法是没有问题的。若要支持firefox请参照下面:
程序代码
复制代码
代码如下:filter:alpha(opacity=80); /* IE */
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)*/
简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。
相关文章
Filtering Blocks JS+CSS实现的的购物产品列表
Filtering Blocks JS+CSS美化的购物产品列表,响应鼠标变色,一眼能看出,这种写法是来自一款国外的风格,具体样式请看截图,大家如有兴趣,可下载参考。2010-04-29- 前些天在做一个项目的时候,用到了阴影,阴影是个方向都有的,今天看到bricss说到filter:drop-shadow顿时豁然开朗,现整理了,需要的朋友可以参考下2012-12-12
CSS3 滤镜 webkit-filter详细介绍及使用方法
CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它,需2012-12-27css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性,感兴趣的朋友2013-01-08使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
跨浏览器兼容性是网页制作永恒的难题,所以在未来一段时间里,样式表里的-moz-,-webkit-,(-ms-,-o-)等等前缀将长期存在,除了考虑各家浏览器之间的兼容性外,我们还有必要2013-01-23- 本节为大家介绍了CSS中filter滤镜,包括静态滤镜及动态滤镜的使用方法,不了解的朋友可以参考下2014-08-08
- 本文给大家介绍的是CSS结合filter实现简单的图片透明效果的实例,主要使用filter的功能对图片元素进行透明度控制,需要的朋友可以参考下2015-01-13
最新评论