[技研]免程式--超完美CSS透明效果(opacity)解決方案

總想透明

從之前一直就想把一些平面設計時有用過的效果用在網頁設計上~但是常常因為網頁技術的問題，無法達到，就像是半透明效果一樣~
最近同事又問到這個網頁半透明效果的問題，要如何達到母區塊半透明，而內區塊內容是不透明的效果呢? Google了很久，也總是沒有找到解決方式，最後自己轉了幾個想法後，總算想出一個完美的解決方式。

Opacity & Borwser problem

首先我們要用透明效果之前必須要先知道透明的CSS寫法以及瀏覽器支援性的問題，標準的CSS透明寫法是 opacity: 0.5; 但是IE偏偏不支援這個CSS，所以我們只好使用微軟的ActiveX來達到透明的效果，寫法是這樣的filter:alpha(opacity=50); 再來就是Firefox，其實Firefox是支援 opacity 標準寫法的，不過他自己也有一個專用的CSS寫法，就當作補充資訊，各位了解一下就好了，Firefox 的寫法是-moz-opacity: 0.5; 瞭解了這些寫法跟瀏覽器的問題之後，我們就可以知道，當我們寫的透明效果要在多個不同的瀏覽器都可以被正常閱覽的話，那我們的CSS就應該這樣下：

filter:alpha(opacity=50);
opacity: 0.5;

同時下兩個CSS讓不同的瀏覽器都能讀到自己支援的CSS就是最簡單的做法了，反正IE看不懂 opacity: 0.5; 而Firefox看不懂 filter:alpha(opacity=50); 這樣就搞定啦~^^~

甚麼!! 你嫌太簡單? 沒錯~別懷疑~就這麼簡單~但是問題還在後面~請再往下看吧~

頭痛的繼承問題

透明效果很簡單就可撰寫好，不過問題來了! 只要是被包在設定了透明的區塊中的物件(文字或是圖片)，都會直接繼承母區塊的透明度，所以會造成文字或是圖片識別不清楚，且因為圖片變呈半透明，會透出下層的顏色或是圖形，那就難看了~

就像下面這樣字都看不清楚了~>"<|||~

小正正BLOG透明效果

在小正正的BLOG中就有此效果，但是唯一的缺點就是在IE有效果，FF中卻沒有作用，例如：

IE中是這樣

Firefox中變成這樣

以下就是小正正BLOG中的CSS寫法

HTML
<div class="box">     <div class="ct">         內容     </div> </div>

 

CSS
.box {     background:#666;     width:100px;     filter:alpha(opacity=10);     opacity:.1; } .ct{     position: relative;/*最重要的一條，沒有這項的話~內容就會跟著透明*/}

按這裡看範例

壞掉的印表機之超完美透明區塊做法

現在來看看完美的解決方案吧!! 使用這個做法，你可以得到IE與Firefox都有相同的透明效果。

IE中

Firefox中

來看看原始碼做法

HTML
<div class="box2">     <img src="space2.gif" class="img" />     <div class="ct2">         <P>內容</P>     </div> </div>

 

CSS
.box2{     position:relative;     background:none;     width:300px;      overflow:hidden;} .box2 .img{     position:absolute;     z-index:-1;     top:0;     left:0;     background:#0033CC;     width:100%;     height:100%;     filter:alpha(opacity=50);     opacity:.5;}

 

將透明效果設定在 space2.gif 這張圖片上，並且將圖片設定為絕對位置，讓它跳脫出區塊的行列，然後再設定它的寬高各為100%，好讓圖片能自動伸展填滿整個區塊，但是為了避免設定絕對位置後，圖片會跳脫出母區塊，所以母區塊要設定相對定位(position:relative;)屬性，這樣圖片就會以母區塊為計算區域來定位了。

另外，由於圖片是浮動在絕對位置，所以他會蓋住區塊中其他的內容，所以我們要再增加一個Z軸的設定，把Z軸使用z-index:-1;設定-1到後面去就不會蓋住其它的內容了~

再來因為FireFox會預設區塊背景為白色，當一切設定完後，如果母區塊沒有加上溢排(overflow:hidden;)處理以及背景透明(Background:none) 的話，那麼在Firefox中將看不到任何效果。

最後的最後，圖片使用透明1px的GIF檔好方便我們使用CSS來修改背景色，如此一來，若想改顏色就不需要修改圖片，只需要修改CSS即可輕鬆達到目的了。

按這裡看範例

如果這篇文章有解決您長久的問題，請回應一下吧~感謝各位