制作半透明效果
半透明效果越来越常见，如果应用的好的话，能给网页带来很美观的效果。
由于各个浏览器差异，所以半透明效果实现起来还是有一点麻烦的。
IE 使用滤镜，即 filter:alpha(opacity=x) ，x 取值范围为 0 - 100 。默认值为 100 ，不透明。 0 为完全透明。
FF 使用其私有属性：-moz-opacity ，其后直接加数值，取值范围为 0.0 - 1.0 。默认值为 1 ，不透明。 0 为完全透明。
CSS3 半透明属性 opacity ，其后也是直接加数值，取值范围同样为 0.0 - 1.0 。
虽然 IE 和其他浏览器实现的方法不一样，但一起用，就都有效果了。看例子：
XHTML代码：
<div id="wrap">
<br />
<br />
<div id="box">
<br />
<br />
</div>
<br />
<br />
</div>
<br />
<br />
<div id="box">
<br />
<br />
</div>
<br />
<br />
</div>
CSS代码：
#wrap{
background:#FF0000;
}
#box{
background:#fff;
filter:alpha(opacity=60); /* for ie */
opacity:0.6; /* for ff or other */
width:100%;
}
background:#FF0000;
}
#box{
background:#fff;
filter:alpha(opacity=60); /* for ie */
opacity:0.6; /* for ff or other */
width:100%;
}
虽然 FF 有私有属性设置半透明效果，但它支持 CSS3 标准半透明属性 opacity ，那当然选择标准了。
从效果里可以看到子元素的半透明效果，透出了父元素的背景颜色。
要注意的是：必须给需要半透明的元素设置背景颜色为白色，否则没有效果。而对于 IE 又还需要设置宽度或高度属性，否则也没有效果。如上例把 width:100% 去掉则没有效果。
还需要说明的是：IE 滤镜不能通过 W3C 验证。