§ ITPOW >> 文档 >> CSS

兼容 IE、Firefox、Chrome 的透明度 CSS

作者：vkvi 来源：ITPOW（原创） 日期：2010-5-30
<style type="text/css">
body
{
    background-color:#009999;
}
.t
{
    background-color:#FFFFFF;
    color:#000000;
    width:300px;
    filter:alpha(opacity=50);
    opacity:0.5;
}
</style>
 
<div class="t">本来这里背景是白的，但由于设置了半透明，看起来有些偏蓝绿色。</div>

说明

IE 中响应 filter:alpha(opacity=50);，Firefox、Chrome 中响应 opacity:0.5;。在很久前的 Firefox 中，其实 opacity 也没效，那时使用 -moz-opacity:0.5;，但那也是多年前的事了，现在完全可以不考虑。

现在再来说一说为什么加了一个 width，如果不加的话在 IE 中就没有了半透明的效果。至于原因嘛，可参见如何让透明度起作用（2006-04-02 更新）。如果是 img 元素，则 IE 中也可以不加 width。

相关文章