星期四, 元月 17, 2008

CSS 透明度效果實作

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

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

但是遇到 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 都沒列到的, 不想管它)

其它相關網頁:

作者 jon ( Programming ) :: 迴響 (6):: 靜態連結網址
相關標籤

this is comment icon [回覆]

zoom:1 只是是用來trigger hasLayout的
http://www.satzansatz.de/cssd/onhavinglayout.html

Comment by chunghe (01/17/2008 16:10)

this is comment icon 回 chunghe [回覆]

感謝指點, 一直很疑惑 zoom:1 這個.. Orz..

Comment by Tsung (01/17/2008 16:44)

this is comment icon 問題請教 [回覆]

我想要做一個透明遮罩來蓋住整個網頁，但是在IE裡，我用一個div來實現時，發現HTML的select元素無法被蓋住，經google查，發現有一個替代方法是用iframe，但是使用iframe蓋住網頁會有個問題是select元素居然變不可見了，請問有什麼好方法解決??

Comment by J (09/04/2008 01:47)

this is comment icon 回J [回覆]

我測試可以耶?
範例:
#op {
position: absolute; left:0; top:0; width:100%; height:1024px; background:#ccc;
filter:alpha(opacity=70);opacity:0.7;zoom:1;
}

div id="op"
xxx
/div

內容

ooo

oox

Comment by Tsung (09/04/2008 09:35)

this is comment icon 問題請教-part 2 [回覆]

不行耶 範例在下面 u can refer to http://www.macridesweb.com/oltest/IframeShim.html ================================================= Untitled Document 測試!SELECT元素蓋不住 1
Comment by J (09/04/2008 11:09)

this is comment icon 回 J [回覆]

我測試 IE6/IE7 都是可以的耶, 你看的這篇文章指的是 IE 5.5 以前的版本, 我會建議 IE 5.5 以前的不要去考慮了, 不然做不完哩. :~~~

Comment by Tsung (09/04/2008 11:40)
Add this page to del.icio.us Add this page to Yahoo Taiwan's bookmark Add this page to MyShare

發表迴響

標題

內容 (限制 1000 字)

暱稱

電子郵件

個人網頁


 authimage


PS: 若無法留言, 請先確認是否有打開 JavaScript, 造成您的困擾, 實在萬分對不起 Orz...(如果無法留言, 勞煩可以發信給我好嗎? 謝謝.)
PS2: 若您的留言被誤判, 我都會再自行看過, 不需要一直重覆張貼~