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

相關網頁


關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 Programming。將永久鏈結加入書籤。

CSS 透明度效果實作 有 12 則回應

  1. chunghe 說道:

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

  2. Tsung 說道:

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

  3. J 說道:

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

  4. Tsung 說道:

    我測試可以耶?
    範例:
    #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

  5. J 說道:

    不行耶
    範例在下面
    u can refer to http://www.macridesweb.com/oltest/IframeShim.html
    =================================================

    Untitled Document

    測試!SELECT元素蓋不住

    1

  6. Tsung 說道:

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

  7. 3592 說道:

    請教 如何讓DIV背景透明,上面的字半透明呢? 我google了很久但我試不成功,上面的字仍是跟著透明? 可以如何修正呢 可否幫個忙回覆給我? thx
    CSS↓
    .background
    {
    width: 614px;
    height: 270px;
    background: url(bg.gif) no-repeat;
    border: 1px solid #EEEEEE;
    }
    .transbox { width: 500px; height: 220px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.6; position:relative;}
    .transbox p { margin: 30px 40px; color: #000000; }
    html↓

  8. jessica 說道:

    這篇很好用,每次寫一寫忘記時,我都會回來COPY,感謝~
    用在我的部落格版型設定上.
    http://tw.myblog.yahoo.com/jessica-bird/archive?l=f&id=17

  9. Tsung 說道:

    呵呵~ 很高興對您有幫助~ 🙂

  10. 亞樂 說道:

    你好 , 我也有一個關於在 IE 7 下無法顯示 DIV 圖層透明度的問題, 希望能夠
    得到你的指導.

    我寫了一個 JavaScript 的函式 ShowMovieLayer()
    只要呼叫 ShowMovieLayer() 就會在畫面上產生一個半透明的圖層。
    程式碼如下:

    function ShowMovieLayer()
    {

    // 產生 畫面遮罩
    var ScreenMask = document.createElement("DIV");
    ScreenMask.style.position = "absolute";
    ScreenMask.style.width = "980px";
    ScreenMask.style.height = "750px";
    ScreenMask.style.zIndex = 2;

    ScreenMask.style.visibility = "visible";
    ScreenMask.style.backgroundColor = "#000000";

    if( navigator.appName != "Microsoft Internet Explorer" ) // 非 IE 瀏覽器
    {
    ScreenMask.style.opacity = "0.5";
    }
    else // IE 瀏覽器
    {
    ScreenMask.style.filter="alpha(opacity=70);opacity:0.7;zoom:1";
    }

    document.body.appendChild(ScreenMask);

    ScreenMask.style.top ="0px";
    ScreenMask.style.left = "0px";
    }

  11. Tsung 說道:

    好像怪怪的, 通常 JavaScript style 接的參數應該都只有一個, 這樣子接一串應該不能動.
    我改寫好的在這邊 http://test.longwin.com.tw/op-css/opacity.html 剛剛測試過是可以動的~
    不過 zoom:1 這個我沒加, 這個要去查查要怎麼加進 js 裡面.

發表迴響