當(dāng)我們?cè)谧鼍W(wǎng)頁(yè)的時(shí)候，有時(shí)為了整體頁(yè)面搭配的美觀，需要設(shè)置層樣式為透明或者半透明，因?yàn)橥该魍墚a(chǎn)生不錯(cuò)的網(wǎng)頁(yè)視覺(jué)效果。在使用的背景的頁(yè)面中，如果不設(shè)置頁(yè)面內(nèi)容區(qū)為半透明狀態(tài)，突出不了背景的作用，也顯得不那么協(xié)調(diào)。用傳統(tǒng)的CSS實(shí)現(xiàn)背景半透明效果的方法是用兩個(gè)層，一個(gè)放文字，另一個(gè)做透明背景，但是透明濾鏡的效果會(huì)影響到里面的內(nèi)容。如果只需要在IE下實(shí)現(xiàn)，是有更簡(jiǎn)單的方法可以實(shí)現(xiàn)的。

CSS半透明屬性

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

CSS透明度繼承問(wèn)題

CSS的透明屬性涉及到一個(gè)繼承問(wèn)題，當(dāng)為父級(jí)元素設(shè)置透明度后，子元素將自動(dòng)繼承其透明度，比如下圖的效果:

還有一種不錯(cuò)的實(shí)現(xiàn)方法：添加一個(gè)空元素作為透明層，和不想透明但是要實(shí)現(xiàn)覆蓋效果的元素為同級(jí)元素。父級(jí)元素使用position:relative定位; 兩個(gè)子元素使用position:absolute定位，實(shí)現(xiàn)覆蓋。具體解釋說(shuō)明請(qǐng)點(diǎn)擊本鏈接

IE下實(shí)現(xiàn)半透明

HTML代碼：

<divclassdivclass="alpha1"> 
<divclassdivclass="ap2"> 
<p>背景為紅色(#FF0000)，透明度20%。</p> 
</div> 
</div> 

CSS代碼：

.alpha1{  
width:300px;  
height:200px;  
background-color:#FF0000;  
filter:Alpha(Opacity=30);  
}  
.ap2{  
position:relative;  
}  

兼容FF、OP的寫(xiě)法：

兩個(gè)層重疊的方法改下頁(yè)面結(jié)構(gòu)與CSS樣式

HTML代碼：

<divclassdivclass="alpha1"> 
<divclassdivclass="ap2"> 
<p>背景為紅色(#FF0000)，透明度20%。</p> 
</div> 
<!--[ifIE]><![if!IE]><![endif]--><divclassdivclass="alpha2"> 
</div><!--[ifIE]><![endif]><![endif]--> 
</div> 

CSS代碼：

.alpha1,.alpha2{  
width:100%;  
height:auto;  
min-height:250px;/*必需*/  
_height:250px;/*必需*/  
overflow:hidden;  
background-color:#FF0000;/*背景色*/  
}  
.alpha1{  
filter:alpha(opacity=20);/*IE透明度20%*/  
}  
.alpha2{  
background-color:#FFFFFF;  
-moz-opacity:0.8;/*MozFF透明度20%*/  
opacity:0.8;/*支持CSS3的瀏覽器（FF1.5也支持）透明度20%*/  
}  
.ap2{  
position:absolute;  
}