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

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈CSS 透明度效果實作〉中有 12 則留言

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

    回覆

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

    回覆

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

    回覆

  7. 請教 如何讓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↓

    回覆

  11. 你好 , 我也有一個關於在 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";
    }

    回覆

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。