在前段时间工作中，需要做如下透明的层效果，
要点：PNG图片透明，.AlphaImageLoader可提供IE5.5以上一个PNG通道，同时拥有PNG的0％～100％透明属性。
给出示例：http://www.5key.net/ex/6-8
使用了css的alpha滤镜。能实现如下效果。但是div内的内容受到影响，一起都被赋予了alpha值。
同事给的意见是使用td定义alpha，然后用div来定义内容。实现将内容与效果分离，但是同样也遇到问题，td定义的效果无法根据内容的高度扩展而延伸。
这两天在网上寻找别的方法，看到文章中写到。
IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。我们就利用这个滤镜和hack来设计一个半透明png背景图片的模型
也就是说，我们可以通过png的透明属性来实现我们需要的效果而不会影响到内容。但注意一点：必须给png图片设置的是透明
//css部分
body{
font-size:14px;
margin:0px;
padding:0px;
}
div#main{
background-image:url(images/bg.jpg);
width:480px;
height:180px;
padding:10px;
color:white;
}
#content{
width:300px;
margin:10px;
height:100px;
padding:10px;
border:1px #000 solid;}*html #content {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”images/bg.png” mce_src=”images/bg.png”);
background:none;
}
html部分
<div id=”main”>
<div id=”content”>这个是用来测试一下透明层的效果。</div>
</div>
