CSS 透明度效果實作

CSS 透明度的實作, 各種瀏覽器和標準如下:(數字越小越透明)

標準: opacity:0~1 (Firefox 用此即可)
IE7: filter:alpha(opacity=0~100);
Mozilla 1.0~1.6: -moz-opacity: 0~1 (這個基本上, 應該可以不用理它了, Firefox 只要 opacity 即可)

CSS 透明度

但是遇到 IE6 要特別再加上 zoom:1, 不然透明度不會有效果(在模擬的 IE6 無法顯示出透明效果).

完整 CSS 範例如下:(假設透明度 70%)

filter:alpha(opacity=70);opacity:0.7;zoom:1;

Mozilla 1.0~1.6 如果也想顧, 就再加上 -moz-opacity:0.7; 即可. (連 Graded Browser Support 都沒列到的, 不想管它)

2011年補充, 透明度完整寫法

filter:alpa(opacity=80); /* old IE */ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80,FinishOpacity=15, Style=3, StartX=0, FinishX=100, StartY=0,FinishY=16); /*supported by current IE*/ -moz-opacity:0.7; /* Moz + FF */ opacity:0.7; /* 支持新版瀏覽器 */