CSS Opacity:透明度在各瀏覽器上的應用

作者: Jas / 發表於 2009-07-02

透明度的應用,向來是網站視覺規劃上的一大挑戰,尤其是扯上PNG-24 Portable Network Graphics (palettes of 24-bit RGB colors) 的時候。

考慮到IE6這個超難搞的變數,最安全的作法是:完全不用透明度,捨棄PNG-24。

否則,即使有pngfix.js這樣的奇技淫巧,暫時足以用來應付IE6。

然而,就網站長期經營維護,以及實際應用而言,pngfix經常反倒最是後患無窮的一種選擇。

除非你斷下決心不管IE6,否則,遲早你都得找出一套澈底解決透明度在各瀏覽器上應用的方案。

這幾天,想到這樣的問題時,很直覺地認為:

  1. 在IE6消失之前,似乎還是得暫時擱置PNG-24,而改以搭配適當Matte color的GIF Graphics Interchange Format 來處理去背型的透明度應用。
  2. 使用CSS來處理區塊型的透明度應用。

前者,只要透過Photoshop即可達成。

後者,則需要先弄清楚各瀏覽器所能正確解讀的透明度參數寫法。

簡單條列各瀏覽器透明度參數寫法如下:

(1)FireFox、Safari跟Opera:

opacity: 數值; /* 數值為0~1 */

(2)古老的FireFox寫法:

-moz-opacity: 數值; /* 數值為0~1 */

(3)古老的Safari寫法:

-khtml-opacity: 數值; /* 數值為0~1 */

(4)IE:

filter:alpha(opacity=數值); /* 數值為0~100 */
Shinning Jas9 Taipei.

以上圖為例,如果我希望這張圖呈現出半透明的視覺效果,則可以直接寫成in-line CSS套用在這張圖上:

style="opacity:0.5;-moz-opacity:0.5;-khtml-opacity: 0.5; filter:alpha(opacity=50);"

效果如下:

Shinning Jas9 Taipei.

當然,你也可以定義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如下:

Shining Jas9 Taipei.

當然,這只是基本式,透明度的應用是可以更千變萬化,就看實際需求與創意發想之間如何去作取捨了。





回上方