CSS实现HTML元素透明的那些事.doc

 HYPERLINK /2009/09/06/css-opacity/ \o 到《CSS实现HTML元素透明的那些事》的永久链接 CSS实现HTML元素透明的那些事 CSS3草案中定义了 HYPERLINK /TR/css3-color/ \l transparency {opacity:length | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性 HYPERLINK /en-us/library/ms532967%28VS.85%29.aspx filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看 HYPERLINK /yui/articles/gbs/ A级浏览器所支持的用 HYPERLINK /en/CSS/opacity CSS实现元素透明的方案： 浏览器最低版本方案Internet Explorer4.0filter: alpha(opacity=xx);5.5filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); 8.0filter: alpha(opacity=xx);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);-ms-filter: alpha(opacity=xx);-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); Firefox (Gecko)0.9 (1.7)opacityOpera9.0opacitySafari (WebKit)1.2 (125)opacity实际上在IE8中，-ms-filter是filter的别名，两者区别是 HYPERLINK /en-us/library/ms530752%28VS.85%29.aspx -ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。 IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性 HYPERLINK /en-us/library/ms530764%28VS.85%29.aspx hasLayout，且其值为true。具体情况如下： body、img、table、tr、th、td等元素的hasLayout一直为true。 type为text、button、file或select的input的hasLayout一直为true。 设置{position:absolute}的元素的hasLayout为true 设置{float:left|right}的元素的hasLayout为true 设置{display:inline-block}的元素的hasLayout为true 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true： IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如 HYPERLINK /lab/2009/css-opacity/ \l demo3 demo3就不行。 元素在怪癖模式（compat mode）下。 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。 设置了{writing-mode:tb-rl}的元素的hasLayout为true。 元素的 HYPERLINK /en-us/library/ms537837%28VS.85%29.aspx contentEditable的属性值为true。 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如 HYPERLINK /lab/2009/css-opacity/ \l demo8 demo8。 关于hasLayout的更多详情可以看 HYPERLINK /en-us/library/bb250481%28VS.85%29.aspx Exploring Internet Explorer “HasLayout” Overview和 HYPERLINK http://www.satzansatz.de/cssd/onhavinglayout.html On having