制作CSS半透明效果的浮動層

class="area">

如何建立CSS半透明效果的浮動層。這樣的效果在頁面也是非常常用的。我們通過簡單的filter和opacity設置來達到效果。並且最終的頁面能夠兼容IE6、IE7和FF。我們看最終的完成效果。

我們看HTML編碼：

XML/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編碼。

CSS代碼

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

對wrap層進行簡單的定義，設置一個背景圖片。以顯示出即將出現的半透明的效果。繼續設置CSS。

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層實現了半透明的效果。

　▲▲▲ >>>點擊查看最終的效果<<<