總想透明
從之前一直就想把一些平面設計時有用過的效果用在網頁設計上~但是常常因為網頁技術的問題，無法達到，就像是半透明效果一樣~
最近同事又問到這個網頁半透明效果的問題，要如何達到母區塊半透明，而內區塊內容是不透明的效果呢? 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"> |
| CSS |
|---|
| .box { .ct{ |
按這裡看範例
壞掉的印表機之超完美透明區塊做法
現在來看看完美的解決方案吧!! 使用這個做法，你可以得到IE與Firefox都有相同的透明效果。
IE中
Firefox中
來看看原始碼做法
| HTML |
|---|
| <div class="box2"> |
| CSS |
|---|
| .box2{ |
將透明效果設定在 space2.gif 這張圖片上，並且將圖片設定為絕對位置，讓它跳脫出區塊的行列，然後再設定它的寬高各為100%，好讓圖片能自動伸展填滿整個區塊，但是為了避免設定絕對位置後，圖片會跳脫出母區塊，所以母區塊要設定相對定位(position:relative;)屬性，這樣圖片就會以母區塊為計算區域來定位了。
另外，由於圖片是浮動在絕對位置，所以他會蓋住區塊中其他的內容，所以我們要再增加一個Z軸的設定，把Z軸使用z-index:-1;設定-1到後面去就不會蓋住其它的內容了~
再來因為FireFox會預設區塊背景為白色，當一切設定完後，如果母區塊沒有加上溢排(overflow:hidden;)處理以及背景透明(Background:none) 的話，那麼在Firefox中將看不到任何效果。
最後的最後，圖片使用透明1px的GIF檔好方便我們使用CSS來修改背景色，如此一來，若想改顏色就不需要修改圖片，只需要修改CSS即可輕鬆達到目的了。
按這裡看範例
