透明度的應用，向來是網站視覺規劃上的一大挑戰，尤其是扯上PNG-24 Portable Network Graphics (palettes of 24-bit RGB colors) 的時候。
考慮到IE6這個超難搞的變數，最安全的作法是：完全不用透明度，捨棄PNG-24。
否則，即使有pngfix.js這樣的奇技淫巧，暫時足以用來應付IE6。
然而，就網站長期經營維護，以及實際應用而言，pngfix經常反倒最是後患無窮的一種選擇。
除非你斷下決心不管IE6，否則，遲早你都得找出一套澈底解決透明度在各瀏覽器上應用的方案。
這幾天，想到這樣的問題時，很直覺地認為：
- 在IE6消失之前，似乎還是得暫時擱置PNG-24，而改以搭配適當Matte color的GIF Graphics Interchange Format 來處理去背型的透明度應用。
- 使用CSS來處理區塊型的透明度應用。
前者，只要透過Photoshop即可達成。
後者，則需要先弄清楚各瀏覽器所能正確解讀的透明度參數寫法。
簡單條列各瀏覽器透明度參數寫法如下：
（１）FireFox、Safari跟Opera：
opacity: 數值; /* 數值為0~1 */
（２）古老的FireFox寫法：
-moz-opacity: 數值; /* 數值為0~1 */
（３）古老的Safari寫法：
-khtml-opacity: 數值; /* 數值為0~1 */
（４）IE：
filter:alpha(opacity=數值); /* 數值為0~100 */
以上圖為例，如果我希望這張圖呈現出半透明的視覺效果，則可以直接寫成in-line CSS套用在這張圖上：
style="opacity:0.5;-moz-opacity:0.5;-khtml-opacity: 0.5; filter:alpha(opacity=50);"
效果如下：
當然，你也可以定義CSS Selector，進行更多元有趣的應用。
譬如說：Mouseover的效果。
先定義CSS：
<style type="text/css">
a img.jas_opacity{opacity:0.5;-moz-opacity:0.5;-khtml-opacity: 0.5; filter:alpha(opacity=50);}
a img.jas_opacity:hover{opacity:1;-moz-opacity:1;-khtml-opacity: 1; filter:alpha(opacity=100);}
</style>
再套用a:hover如下：
當然，這只是基本式，透明度的應用是可以更千變萬化，就看實際需求與創意發想之間如何去作取捨了。
Tags:
