반투명성을 달성하기 위해 여러 브라우저와 호환됩니다(Opera, 즉 Firefox)_경험 교환

위의 링크를 클릭하면 점차적으로 페이드 인/아웃되어 이미지가 사라졌다가 다시 나타납니다. CSS 투명성을 사용하며 CSS에서는 투명도를 다양한 방법으로 설정할 수 있습니다. 대부분의 브라우저에서 작동하도록 하기 위해 우리는 세 가지를 모두 사용합니다.

불투명도: 0.5;
이것은 공식 CSS3 방법으로 현재 최신 Mozilla 버전에서 작동합니다. 
-moz-opacity: 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를 지원할 것입니다. 어디에서나 작동해야 합니다.

复主代码 代码如下:

함수 opacity(id, opacStart, opacEnd, millisec) {
    //각 프레임의 속도
    var speed = Math.round(millisec / 100);
    var 타이머 = 0;

    //블렌딩 방향을 결정합니다. 시작과 끝이 동일하면 아무 일도 일어나지 않습니다.
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(타이머 * 속도));
            타이머++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
       
           setTimeout("changeOpac(" + i + ",'" + id + "')",(타이머 * 속도));
            타이머++;
        }
    }
}

//다른 브라우저의 불투명도 변경
함수 ChangeOpac(opacity, id) {
    var 객체 = document.getElementById(id). 스타일; 
    object.opacity = (불투명도 / 100);
    object.MozOpacity = (불투명도 / 100);
    object.KhtmlOpacity = (불투명도 / 100);
    object.filter = "alpha(opacity=" + 불투명도 + ")";
}

function shiftOpacity(id, milisec) {
    //요소가 표시되지 않으면 표시되도록 하고, 그렇지 않으면 표시되지 않도록 설정
    if(document.getElementById(id).style .opacity == 0) {
        불투명도(id, 0, 100, 밀리초);
    } else {
        불투명도(id, 100, 0, 밀리초);
    }
}

function blendimage(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var 타이머 = 0;

    //현재 이미지를 배경으로 설정
    document.getElementById(divid).style.groundImage = "url(" + document.getElementById(imageid).src + ")";

    //이미지를 투명하게 만듭니다
    changeOpac(0, imageid);

    //새 이미지 만들기
    document.getElementById(imageid).src = imagefile;

    //이미지 페이드 인
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "' )",(타이머 * 속도));
        타이머++;
    }
}

함수 currentOpac(id, opacEnd, millisec) {
    //표준 불투명도는 100
    var currentOpac = 100;

    //요소에 불투명도가 설정된 경우 가져옵니다.
    if(document.getElementById(id).style.opacity < 100) {
        currentOpac = document.getElementById(id). style.opacity * 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/