如何建立CSS半透明效果的浮动层。这样的效果在页面也是非常常用的。我们通过简单的filter和opacity设置来达到效果。并且最终的页面能够兼容IE6、IE7和FF。我们看最终的完成效果。

我们看HTML编码：

1. <div id="wrap">  
2.     <div id="box">  
3.       <a href="http://www.52css.com/" target="_blank">我爱CSS</a><br/>  
4.       <strong>致力于Web标准在中国的应用及发展</strong>             
5.     </div>  
6. </div>  

有了HTML我们开始CSS编码。

1. #wrap {   
2.     position:absolute;   
3.     width:600px;   
4.     height:380px;   
5.     background:url(52css.jpg);   
6. }  

对wrap层进行简单的定义，设置一个背景图片。以显示出即将出现的半透明的效果。继续设置CSS。

1. #box {   
2.     width:300px;   
3.     height:150px;   
4.     filter:alpha(opacity=60);   
5.     opacity:0.6;   
6.     margin-top:100px;   
7.     margin-left:50px;   
8.     background:#fff;   
9.     border:1px #000 solid;   
10.     padding:20px;   
11.     font-size:14px;   
12.     line-height:170%;   
13. }  

定义合适的宽度与高度，并且请您特别留意filter和opacity设置。是它们让box层实现了半透明的效果。

　▲▲▲ >>>点击查看最终的效果<<<