锐客网

  1. 首页 > 睿知 > >

详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

睿知

CSS3的透明度属性opacity想必大家都已经用的无处不在了 。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了 。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别 。
首先，Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值 。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见 。关于浏览器对opacity属性的兼容性请继续往下看：
从Firefox3.5 不再支持私有属性-moz-opacity了，在Mozilla 1.7 (Firefox 0.9)之前FF都是使用这个私有属性的，Firefox 0.9-Firefox3同时支持-moz-opacity和opacity这两个属性，现在回想起刚入职场不久那时候，正好是Firefox升级到3.5之后，一些做好的页面透明效果突然没有了，如今已经CSS3铺天盖地，概叹时光荏苒啊 。
IE9 才开始支持CSS3 opacity，而对IE6-IE8我们习惯使用filter滤镜属性来进行实现 。IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
IE8又引入了特殊的-ms-filter，IE认为这种写法是对旧写法的一次更正，更符合规范，这个写法的属性值只是多了一对引号，效果同前 。不过，这种写法的寿命也不长，到IE10对filter与-ms-filter都已经不再支持 。
Safari 1.2之前的版本，是基于khtml的浏览器内核，1.2版发布后，不再支持-khtml-opacity的写法，-khtml-opacity也随之成为历史 。
Konqueror从未支持过-khtml-opacity，从4.0版本开始已经支持opacity 。
除IE外，目前主流浏览器 Opera 9.0 ，Safari 1.2(WebKit 125)，chrome等等都支持opacity这个透明度属性 。
IE 从4.0版开始，就提供了一些内置的多媒体滤镜特效，具体的使用方法是：
语法：
filter : filter
参数：
filter :要使用的滤镜效果 。多个滤镜之间用空格隔开 。
说明：
1、设置或检索对象所应用的滤镜效果 。
2、要使用该属性，对象必须具有height，width，position三个属性中的一个 。
3、滤镜的机制是可扩展的 。可以开发和使用第三方滤镜 。
4、该属性在MAC平台上不可用 。
5、对应的脚本特性为filter 。
IE4.0以上版本，支持以下14种滤镜：
①、Alpha 让HTML元件呈现出透明的渐进效果
②、Blur 让HTML元件产生风吹模糊的效果
③、Chroma 让图像中的某一颜色变成透明色
④、DropShadow 让HTML元件有一个下落式的阴影
⑤、FlipH 让HTML元件水平翻转
⑥、FlipV 让HTML元件垂直翻转
⑦、Glow 在元件的周围产生光晕而模糊的效果
⑧、Gray 把一个彩色的图片变成黑白色
⑨、Invert 产生图片的照片底片的效果
⑩、Light 在HTML元件上放置一个光影
?、Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩
?、Shadow 产生一个比较立体的阴影
?、Wave 让HTML元件产生水平或是垂直方向上的波浪变形
?、XRay 产生HTML元件的轮廓，就像是照X光一样
Alpha 滤镜参数详解
①、Opacity 不透明的程度，百分比 。从0到100，0表是完全透明，100表示完全不透明 。
【详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法】②、FinishOpacity 这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷 。从0到100，0表是完全透明，100表示完全不透明 。
③、Style 当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状 。0：没有渐进;1：直线渐进;2：圆形渐进;3：矩形辐射 。

推荐阅读


上一篇：别克艾维亚是什么意思 别克艾薇亚是什么意思

下一篇：陕西理工大学经济与法学学院