相容多瀏覽器實作半透明(Opera ie firefox)_經驗交流

點擊上面的連結即可使圖像消失並透過逐漸淡入/淡出的方式重新出現。 它使用 CSS 透明度，在 CSS 中您可以透過不同的方式設定透明度。 為了確保它可以在大多數瀏覽器上運行，我們使用這三個瀏覽器。

不透明度：0.5；
這是官方 CSS3 方法，目前它適用於較新的 Mozilla 版本。 
-moz-不透明度：0.5;
這個適用於舊版的 Mozilla 和 Phoenix/FireBird/FireFox。 
-khtml-不透明度：0.5;
它由使用 KHTML 渲染引擎的瀏覽器使用，即 Linux 上的 Konquerer 和 MacOS 上的 Safari。 
濾鏡：alpha(opacity=50);
此濾鏡僅適用於 MSIE。 
實際上還有另一個：-khtml-opacity：0.5； 適用於 Linux 上的 Konquerer 瀏覽器和 MacOS 上的 Safari。 如果您想支持這些用戶，您也可以添加它。 在不久的將來，大多數瀏覽器將支援 CSS3 和不透明度：0.5； 應該在任何地方都能運作。

複製程式碼程式碼如下：

function opacity(id, opacStart, opacEnd, millisec) {
    //每幀的速度
   0;

    //確定混合方向，如果開始和結束相同，則不會發生
    if(opacStart > opacEnd) {
  
            setTimeout("changeOpac(" + i + ",'" + id + '')",(定時器*速度）)     } else if (opacStart         for(i = opacStart; i             定時器++;
        }
 changeOpac (opacity, id) {
    var object = document.getElementById(id).風格; 
    object.opacity = (不透明度/100). 0);
    object.KhtmlOpacity = (不透明度/100);
    object.filter = 「alpha(opacity=」  opacity illisec) {
    //如果某一元素不可見，則使其可見，否則使其不可見
    if(document.getElementById(id).style .opacity == 0) {     } else {
        不透明度(id, 100, 0, 毫秒);
  不透明度(id, 100, 0, 毫秒);
  不透明度(id, 100, 0, 毫秒);
 agefile ，毫秒）{
    var speed = Math.round（毫秒/ 100）;
    vartimer = 0;
    vartimer = 0;
 .backgroundImage = "url(" + document.getElementById(imageid).src + ")";

    //將圖片建立新映像
    document.getElementById(imageid).src = imagefile;

    //淡入映像       setTimeout(" changeOpac(" + i + ",'" + imageid + "' )",(計時器* 速度));
        (id, opacEnd, millisec) {
    //標準不透明度為100
    var currentOpac = 100;         currentOpac = document.getElementById(id).樣式.不透明度* 100;
    }

    //調用更改不透明度的函數
    opacity(id, currentOpac, opacEnd, millisec)
}


更多參考
http://www.brainerror.net/scripts_js_blendtrans.php
http://realazy.org/blog/ 2006/03/21/ie-firefox-opera-alpha-transparency/
http://alistapart.com/stories/pngopacity/