转载，原文见：http://blog.csdn.net/freshlover/article/details/17143341

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代码

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
   <div class="transparent_class">测试透明度</div>
 </body>
 </html>

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

对应CSS代码：

 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:

 -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
 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

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法的更多相关文章

  1. CSS透明opacity和IE各版本透明度滤镜filter的准确用法

    滤镜名    说明 Alpha     让HTML元件呈现出透明的渐进效果Blur     让HTML元件产生风吹模糊的效果Chroma     让图像中的某一颜色变成透明色DropShadow    ...

  2. css透明属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  4. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  5. CSS透明属性详解代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opaci ...

  6. （转）兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...

  7. css透明背景兼容方案

    css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样 ...

  8. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  9. CSS透明属性详解

    .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ...

随机推荐

  1. WP8没有开发者账号升级GDR3预览版的方法

    很多希望尝鲜WP8 GDR3的朋友一样希望提前体验GDR3的效果,但苦于没有开发者账号而不得其门!今天为大家带来普通账号升级GDR3的方法! 工具/原料 WP8智能手机 可用wifi热点 方法/步骤 ...

  2. git 临时记录

    http://blog.csdn.net/wangbole/article/details/8552808 http://blog.csdn.net/gq414047080/article/detai ...

  3. 深入浅出设计模式——抽象工厂模式（Abstract Factory）

    模式动机在工厂方法模式中具体工厂负责生产具体的产品,每一个具体工厂对应一种具体产品,工厂方法也具有唯一性,一般情况下,一个具体工厂中只有一个工厂方法或者一组重载的工厂方法.但是有时候我们需要一个工厂可 ...

  4. 深入浅出设计模式——外观模式（Facade Pattern）

    模式动机引入外观角色之后,用户只需要直接与外观角色交互,用户与子系统之间的复杂关系由外观角色来实现,从而降低了系统的耦合度. 模式定义外观模式(Facade Pattern):外部与一个子系统的通信必 ...

  5. linux tar.gz

    tar命令用于对文件打包压缩或解压,格式为:“tar [选项] [文件]”. 打包并压缩文件:“tar -czvf 压缩包名.tar.gz 文件名” 解压并展开压缩包:“tar -xzvf 压缩包名. ...

  6. 学习mongo系列（六）limit(munber),skip(number)

    > db.user.find().pretty(){ "_id" : ObjectId("56946fba3a18f4867aecbcd1"), &quo ...

  7. JQuery_过滤选择器

    一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...

  8. Android各组件/控件间通信利器之EventBus

    实际项目开发过程中,经常遇到如下场景:不同的应用程序组件的控件间具有一定的相互关联性,其中用户对后者进行的某种操作会引起前者的相应改变.举一个具体的场景:以糗事百科为例,在糗事列表页和详情页页,对于每 ...

  9. (function($){}) 和$(function(){}) 和$(function($){}) 区别

    请问下(function($){}) 和$(function(){}) 和$(function($){}) 有什么区别 谢谢 一.先看 jQuery(function(){ }); 全写为 jQuer ...

  10. python编程技巧2

    模块化 ---- 这是我们程序员梦寐以求的,通过模块化可以避免重复的制造轮子. 同时 模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块 ...