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表示完全不透明。
②、finish英雄事迹作文opacity 这是一个同opacity一起使用的选择性的参数，当同时opacity和finishopacity时，可以制作出透明渐进的效果，比较酷。 从0到100，0表是完全透明，100表示完全不透明。
③、style 当同时设定了opacity和finishopacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形辐射。
④、startx 渐进开始的 x 坐标值
⑤、starty 渐进开始的 y 坐标值
⑥、finishx 渐进结束的 x 坐标值
⑦、finishy 渐进结束的 y 坐标值
下面通过一个例子来测试filter和opacity的兼容性：
html代码
<!doctype html> <html> <head> <meta chart=utf-8 /> <title>js bin</title> </head> <body> <div class="transparent_class">测试透明度</div> </body> </html>
注意：测试不要忘了写doctype，否则会偏离真实效果。
对应css代码：
.transparent_class { /* required for ie 5, 6, 7 */ /* ...or something to trigger haslayout, like zoom: 1; */ width:300px; height:300px; line-height:300px; text-align:center; background:#000;欧洲和非洲的分界线是什么 color:#fff; /* older safari/chrome browrs */ -webkit-opacity: 0.5; /* netscape and older than firefox 0.9 */ -moz-opacity: 0.5; /* safari 1.x (pre webkit!) 老式khtml内核的safari浏览器*/ -khtml-opacity: 0.5; /* ie9 + etc...modern browrs */ opacity: .5; /* ie 4-9 */ filter:alpha(opacity=50); /*this works in ie 8 & 9 too*/ -ms-filter:"progid:dximagetransform.microsoft.alpha(opacity=50)"; /*ie4-ie9*/ filter:progid:dximagetransform.microsoft.alpha(opacity=50); } 使用中，我们可以根据要适配的浏览器/版本，从上面选择自己需要的代码行。如果要全面支持所有浏览器，至少需要有关opacity或filter的前5句。需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面。原文描述如下：
if you want opacity to also work in ie8′s emulating ie7 mode, the order should be:
-ms-filter:”progid:dximagetransform.microsoft.alpha(opacity=50)”; // first filter: alpha(opacity=50); // cond
if you don’t u this order, ie8 emulating ie7 doesn’t apply the opacity, although ie8 and ie7 native do.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-06 22:22:58，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/bfb5c5151e40180d72668a9a07e64de9.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法.doc
本文 PDF 下载地址：详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法.pdf
| 留言与评论（共有 0 条评论） |
