[轉貼]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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *