分類: 網頁設計

[轉貼]CSS圖片透明

http://www.dotblogs.com.tw/rab/archive/2011/01/21/css-cross-browser-support-alpha-display.aspx

要如何設定網頁中物件的透明度，又讓眾家瀏覽器都能閱讀，可利用下列的設定方式
  
.div_alpha{
 filter:alpha(Opacity=50, Style=0);/*for ie*/ 
 -moz-opacity:0.5;/* Moz + FF */ 
 opacity: 0.5;/* CSS3的標準語法，FOR支援CSS3的瀏覽器（FF 1.5）*/
}
filter:alpha(opacity)是屬於IE的私有屬性，-moz-opacity是屬於Mozilla跟FireFox的私有屬性，opacity則是標準的CSS規則，部分Moz Family也支援CSS3。後面的數值以百分比為單位，IE的Filter數值為0~100，-moz與opacity兩種數值為0~1之間，三種都設定可以確保透明的效果在以上的瀏覽器裡正確執行。
至於Mac上的Opera並不支援透明度屬性的設定，可是他支援png圖檔，所以可以利用png半透明圖檔設定為背景，也可以達到半透明背景的效果。
設定透明度會讓物件本身與子元素都一起半透明，所以文字也會一起變半透明，如果是要作遮罩效果，記得要將物件拆開設定，才不會讓文字也一併被透明化了喔!!
範例網址 / css_alpha_setting.htm