各种浏览器 CSS 透明属性语法
opacity: 0.5;
标准css属性,Firefox, Safari, and Opera 等都支持
filter:alpha(opacity=50);
IE 特有滤镜
-moz-opacity:0.5;
老版本网景(mozilla)浏览器。
-khtml-opacity: 0.5;
老版本 Safari(1.x),以前的内核叫 KHTML,现在叫 Webkit
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
IE 5.5 以后特有属性()
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=50);
IE8 特有写法
css png 透明的办法是
.guoshuang {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/bg.png");
}
.guoshuang[class]{background:url("/bg.png")}
ie 不认识 tag[attribute] 的选择器写法,所以 ie 用前者,其它浏览器用后者。
其它问题
IE 滤镜 filter:progid… 这样的写法,必须针对 have layout 的元素(设置 width height position:absolute等)
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.
设置 position:relative 时会去掉这个滤镜。空的 <div ></div> 不是 have layout 所以比显示滤镜,加入空格 <div > </div> 它才have layout 。
另外,为元素加入 style=”zoom:1″ 也会导致 hasLayout,这也是让ie滤镜起作用的办法。可以通过 element.currentStyle.hasLayout 得知当前元素是否 hasLayout
另外注意,AlphaImageLoader 实际上是加在前后背景之间,并且由于它实际上是控件的方式,所以会压住 input 链接等!(下面的表单、链接点不到)
firefox 特有css 是 -moz-,opera 是 -o-,safari 是 -webkit-
英文原文:
CSS Transparency in All The Browsers
相关参考:






