fading PNG dans Internet Explorer ne fonctionne pas

Question

j'ai un div qui contient une image PNG, comme ceci:

<div id="pop" class="pop_komm"> 
<img src="Graphics/komm.png"> 
</div> 

J'ai un code js qui est déclenché sur l'événement « OnChange » d'une liste déroulante:

<select onchange="fadeIn('pop');" name="list" etc></select> 

Voici le code js:

function setOpacity(eID, opacityLevel) { 
    var eStyle = document.getElementById(eID).style; 
    eStyle.opacity = opacityLevel/100; 
    eStyle.filter = 'alpha(opacity='+opacityLevel+')'; 
} 
function getElm(eID) { 
    return document.getElementById("pop"); 
} 
function show(eID) { 
    getElm(eID).style.display='block'; 
} 
function hide(eID) { 
    getElm(eID).style.display='none'; 
} 
function fadeIn(eID) { 
    setOpacity(eID, 0); show(eID); var timer = 0; 
    for (var i=1; i<=100; i++) { 
     setTimeout("setOpacity('"+eID+"',"+i+")", timer * 2); 
     timer++; 
    } 
    setTimeout("fadeOut('"+eID+"')", 5000); 
} 
function fadeOut(eID) { 
    var timer = 0; 
    for (var i=100; i>=1; i--) { 
     setTimeout("setOpacity('"+eID+"',"+i+")", timer * 2); 
     timer++; 
    } 
    setTimeout("hide('"+eID+"')", 310); 
} 

le problème est que l'opacité rend les coins PNG rugueux et Blac k, et la transparence de la PNG ne fonctionne pas bien du tout. J'ai essayé d'utiliser un pngfix, ce qui aide SI le PNG n'a pas d'effet de "fondu". Mais dès que j'applique cet effet de fondu, j'ai le même problème.

Quelqu'un doit avoir résolu cela avant, alors s'il vous plaît donnez-moi des conseils sur la façon de le résoudre.

J'ai recherché sur Google et trouvé this, mais je ne sais pas vraiment ce qu'il veut dire.

Si vous avez besoin de plus d'entrée laissez-moi savoir ...

BTW, cela fonctionne dans tous les principaux navigateurs, mais IE6, 7 et 8.

Merci

Answer 1

Oui, la mise en alpha sur un transparent Le format PNG remplace complètement la couche alpha par la valeur opacity, de sorte que les parties transparentes redeviennent visibles.

Comme la page vous dit lié, vous pouvez mettre le filtre alpha sur un élément qui contient le PNG, qui ressemble généralement mieux, mais cet élément de conteneur doit hasLayout. Ajoutez un height ou zoom ou quoi que ce soit au conteneur pour déclencher le non-sens de hasLayout d'IE. Cependant, ce n'est pas tout à fait exact, car chaque pixel possède l'opacité minimale de la valeur alpha de ce pixel et l'ensemble opacity, au lieu de multiplier les opacités. Ainsi, les parties semi-transparentes de l'image se retrouvent avec une mauvaise transparence relative. Il peut quand même sembler assez bon comme effet de fondu.

L'opacité multiplicative complète ne peut pas être effectuée dans IE avant IE9.