【转】 CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

标签： css 透明 opacity | 发表时间：2014-04-25 15:48 | 作者：accphc
出处：http://www.iteye.com

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 : 　要使用的滤镜效果。多个滤镜之间用空格隔开。
 
说明：
 
设置或检索对象所应用的滤镜效果。
要使用该属性，对象必须具有height，width，position三个属性中的一个。
滤镜的机制是可扩展的。可以开发和使用第三方滤镜。
该属性在MAC平台上不可用。

对应的脚本特性为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表示完全不透明。
FinishOpacity     这是一个同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代码

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset=utf-8 />  
  5. <title>JS Bin</title>  
  6. </head>  
  7. <body>  
  8.   <div class="transparent_class">测试透明度</div>  
  9. </body>  
  10. </html>  

注意：测试不要忘了写DOCTYPE，否则会偏离真实效果。
对应CSS代码：

[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. .transparent_class {  
  2.     /* Required for IE 5, 6, 7 */  
  3.     /* ...or something to trigger hasLayout, like zoom: 1; */  
  4.     width:300px;  
  5.     height:300px;  
  6.     line-height:300px;  
  7.     text-align:center;  
  8.     background:#000;  
  9.     color:#fff;  
  10.     /* older safari/Chrome browsers */  
  11.     -webkit-opacity: 0.5;  
  12.     /* Netscape and Older than Firefox 0.9 */  
  13.     -moz-opacity: 0.5;  
  14.     /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
  15.     -khtml-opacity: 0.5;  
  16.     /* IE9 + etc...modern browsers */  
  17.     opacity: .5;  
  18.     /* IE 4-9 */  
  19.     filter:alpha(opacity=50);  
  20.     /*This works in IE 8 & 9 too*/  
  21.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
  22.     /*IE4-IE9*/  
  23.     filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
  24. }  

 

使用中，我们可以根据要适配的浏览器/版本，从上面选择自己需要的代码行。如果要全面支持所有浏览器，至少需要有关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:

 

[css]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
  2. filter: alpha(opacity=50); // second  

 

If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.

基于统计的CSS属性支持可以参照caniuse网站 http://caniuse.com/css-opacity
参考文献： CSS opacity介绍 https://developer.mozilla.org/en-US/docs/Web/CSS/opacity?redirectlocale=en-US&redirectslug=CSS%2Fopacity



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [css 透明 opacity] 推荐：

【转】 CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

- - Web前端 - ITeye博客
CSS3的透明度属性opacity想必大家都已经用的无处不在了. 而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了.

由 Opacity 属性引发的层叠问题思考与解决

- - 我爱水煮鱼
在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题. 如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层. 于是动手做了个实验，来验证 opacity 的层次. 网页中的层叠规律是这样的：如果两个层都没有定义 position 属性为 absolute 或者 relative 属性，哪个层的HTML代码放在后面，哪个层就显示在上面.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码. 经测试，IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品，整體來說應該是接近寫完了，不過越接近完工，抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass，說這東西超神奇，超好用，還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了，只是文件實在看起來太他媽的眼花繚亂，因為專案進度一直在跑，不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单，也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”，这样您就可以跨站点应用它 — 也就是说，将样式应用到网站，它就会自行应用到每个网页的每个元素. ●XHTML：可扩展 HTML. 对于网站，将数据与设计分离是一个重要的概念：数据使用 (X)HTML 发送到 浏览器，而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者：kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读：6 评论：0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文： CSS Architecture，编译： CSDN-张红月. Philip Walton 在AppFolio担任前端工程师，他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践，并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型，还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS，为简单理解，将CSS说成两步，一步是你做个“记号”，另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词（选择器），而根据记号设置样式呢，就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子，或是用id做记号，或是用name，或是用class，只有有了这些所谓的记号，CSS设定的样式才有用，.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器：标签选择器，ID选择器，类选择器，通用选择器. 通用选择器：*{css代码}. 通用选择器作用：对整个网页中所有HTML标签进行样式定义. 常见用法：定义*{margin:0;padding:0}通用样式，并置于CSS文件最顶端，用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性. 容器: container 页头：header 内容：content/container. 页面主体：main 页尾：footer 导航：nav . 侧栏：sidebar 栏目：column 左右中：leftright center .