支持Firefox,IE6.0,IE7.0,IE8.0的CSS透明滤镜

支持Firefox,IE6.0,IE7.0,IE8.0的CSS透明滤镜 | 网络基地

展开全文

支持Firefox,IE6.0,IE7.0,IE8.0的CSS透明滤镜

发表于 2011 年 01 月 07 日由 admin | 697 views

网页前端开发中，为了实现一些特殊效果，需要将页面元素变透明，本文介绍用 CSS 实现支持 Firefox 和 IE 的 Alpha 透明效果。

IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数。

filter:alpha(opacity=50); /* IE私有属性 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*IE8*/
-moz-opacity:0.5; /* Firefox私有属性 */
opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/

在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况参考：CSS实现HTML元素透明的那些事

为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，IE团队推荐实现透明的方式是：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;

而目前简单最好用的实现方式是：

filter:alpha(opacity=30);
opacity:.3;