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;               /* 支持新版瀏覽器 */

相關網頁

• Mandarin Design: CSS Opacity and Transparency(透明 + hover 切換, 這邊有很完整的範例和說明)
• zoom Attribute | zoom Property (在很多 Hack 都看到 zoom:1, 那 zoom:1 到底是什麼?)
• 感謝 chunghe : zoom:1 是用來trigger hasLayout 的, 詳可見: On having layout — the concept of hasLayout in IE/Win