当前位置:

浏览器的 css 透明属性

582 views2010-01-22无人留言

各种浏览器 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 >&nbsp;</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

相关参考:

MSDN CSS
Safari CSS 参考
Opera 9 CSS

 
类别:
标签:
除非特殊说明,本站文章均为鹏讯科技版权所有,转载请注明出处。
如本站引用的文字、图片、其它媒体等侵犯了您的权益,请及时告知,我们将会在第一时间删除。

相关文章:

发表评论:

姓名:

邮件:

网址:


当前用户: validated XHTML 1.0 - CSS 3 - Section 508 - PR
Copyright © 2005-2010 陕西鹏讯科技 版权所有