【引文】
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。
【兼容性】
IE9+和目前其他主流浏览器 Opera 9.0+，Safari 1.2(WebKit 125) +，chrome等等都支持opacity这个透明度属性
【简介】
首先，Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明，视觉上看不见
关于浏览器对opacity属性的兼容性请继续往下看：
①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也随之成为历史
【案例解析】
下面通过一个例子来测试filter和opacity的兼容性：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="transparent_class">测试透明度</div> </body> </html>
.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 browsers */
-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 browsers */
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 don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.
翻译为（如果你不使用这个命令，IE8模拟IE7不适用不透明，尽管IE8和IE7本地做）
.
相关推荐
为了兼容IE与其他浏览器对透明度的设置，我们需要对以上两种样式分别进行设置。下面是一段示例代码： 复制代码 代码如下:var alpha = 30; //透明度值变量 var oDiv = document.getElementById(‘di
在群里看见有人贴出一个页面问opacity不支持IE6，有什么好的支持方法没。贴出第一眼就发现用了...难道大家都不知道JQ是支持opacity兼容IE6+的吗？开始他们都不相信。JQ怎么配合使用。于是就写了一个简单的代码给他们。
到Internet Explorer 8为止，IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影，就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后，就想着用更为简洁、直接有效、CSS3式的办法来解决...
问题一：最简单的鼠标移过手变型的css要改了 cursor:pointer;... /* for IE */ opacity: .5;/* for Firefox */ style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.Moz
IE: filter:alpha(opacity) Mozilla: -moz-opacity Safari: -khtml-opacity 很不幸的是，你没看见Opera，老版本的Opera并没有什么私有属性可以代替opacity。（新版Opera已经支持opacity） 所以以前用CSS设定一个...
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体...关于浏览器对opacity属性的兼容性请继续往下看
js里面设置DOM节点透明度的函数属性：filter= “alpha(opacity=” + value+ “)”（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 代码如下: function setOpacity(ele, opacity) {...
IE： filter:alpha(opacity=sqlN) 其中 sqlN的值域为[0, 100] Firefox： -moz-opacity:sqlN 其中sqlN的值域为[0, 1] Chrome和Safari： opacity:sql... 一般不考虑IE6兼容性，如果要考虑IE6的兼容性请在网上搜索PNG JS
” style=”-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;” /> <input id=”ye” style=”color: green;border: 1px solid green;width:300px;” /> <input type=...
jQuery的属性support是判断浏览器之间是否兼容的模块 ，该模块包含了leadingWhitespace，tbody，htmlSerialize，style，hrefNormalized，opacity，cssFloat，checkOn，optSelected，getSetAttribute….等兼容问题，...
使用Alpha可以设置透明度，FILTER:alpha在IE下是没有问题的，要支持firefox就需要使用-moz-opacity，下面有个不错的示例，大家可以参考下
透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码。 CSS Code复制内容到剪贴板 transparent_class { ...filter:alpha(opacity=50):这个是为IE6设的，可取值在0-100，其它三个0到1. -moz-op
CSS代码 复制代码代码如下: .test{ background:#000; color:white; width:200px; position:absolute;...这三句,第一句是ie 支持.第二三句是firefox支持的,但是版本不一样就有两种了,所以用时候把三句
上古世纪官网jquery焦点图代码，兼容 IE 789 及其它主流浏览器 ，因 IE 6 不支持CSS透明属性（opacity）故在IE 6下无图片淡入淡出效果
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变，但是需要注意的是不兼容IE8及以下的IE浏览器，原因：由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值！
兼容 IE、FireFox、Chrome 等浏览器（对于IE 6的兼容问题将不做特殊维护） 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree ...
兼容IE和FF。 代码如下:/**************** * * IE-BUG: * 在IE中，设置opacity属性时，元素样式中需要设置opacity属性，才能读取到opacity值。 * * obj：元素对象。 attr：用引号包围的属性名。 iTarget：...