編程教程CSS半透明屬性介紹及代碼實例
當我們在做網頁的時候，有時為了整體頁面搭配的美觀，需要設置層樣式為透明或者半透明，因為透明往往能產生不錯的網頁視覺效果。在使用的背景的頁面中，如果不設置頁面內容區為半透明狀態，突出不了背景的作用，也顯得不那么協調。用傳統的CSS 實現背景半透明效果的方法是用兩個層，一個放文字，另一個做透明背景，但是透明濾鏡的效果會影響到里面的內容。如果只需要在IE下實現，是有更簡單的方法可以實現的。
CSS半透明屬性
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
①opacity: 0.5; 這是最重要的，因為它是 CSS 標準.該屬性支持 Firefox, Safari 和 Opera.
②filter:alpha(opacity=50); 這個是為 IE6 設的，可取值在 0-100，其它三個 0 到 1.
③-moz-opacity:0.5; 這個是為了支持一些老版本的 Mozilla 瀏覽器。
CSS 透明度繼承問題
CSS 的透明屬性涉及到一個繼承問題，當為父級元素設置透明度后，子元素將自動繼承其透明度，比如下圖的效果:
即使你又為子元素指定透明度為1也是無效的。
對于子元素是文字的情況，一般的解決方法是如果多少還能夠看清，就不管。另一個折中的方法是，為文本子元素指定一個相對更深的顏色。也就是說，當子元素繼承透明度后，所得到的文本顏色正好就是你想要的。前提是這個顏色還有加深的可能，和需要詳細的計算顏色和透明度的值。
還有“取消透明度繼承”的說法，這個說法是不太準確的，實際上沒有任何取消透明度繼承的方法。只能說，當想要實現“多個元素覆蓋，只讓指定的元素透明”時，可以使用的一些Hack。
還有一種不錯的實現方法：添加一個空元素作為透明層，和不想透明但是要實現覆蓋效果的元素為同級元素。父級元素使用position:relative定位; 兩個子元素使用position:absolute定位，實現覆蓋。具體解釋說明請點擊本鏈接
IE下實現半透明
HTML代碼：
<div class="alpha1">
<div class="ap2">
<p>背景為紅色(#FF0000)，透明度20%。</p>
</div>
</div>
CSS代碼：
.alpha1{
width:300px;
height:200px;
background-color:#FF0000;
filter:Alpha(Opacity=30); }
.ap2{
position:relative; }
實例
.alpha1{
width:300px;
height:200px;
background-color:#FF0000;
filter:Alpha(Opacity=30); }
兼容FF、OP的寫法：
兩個層重疊的方法改下頁面結構與CSS樣式
HTML代碼：
<div class="alpha1">
<div class="ap2">
<p>背景為紅色(#FF0000)，透明度20%。</p>
</div>
<div class="alpha2">
</div>
</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; }
實例
.alpha1,.alpha2{
width:100%;
height:auto;
min-height:250px;/*必需*/
_height:250px;/*必需*/
overflow:hidden;
background-color:#FF0000;/*背景色*/ }