Internet Explorer 中的褪色 PNG 不起作用答案

【问题标题】：Fading PNG in Internet Explorer not workingInternet Explorer 中的褪色 PNG 不起作用
【发布时间】：2010-09-18 13:21:21
【问题描述】：

我有一个包含 PNG 图像的 div，如下所示：

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

我有一个在下拉列表的“OnChange”事件上触发的 js 代码：

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

这里是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);
}

问题是不透明度使PNG角落变得粗糙和黑色，并且PNG的透明度根本无法正常工作。我尝试过使用 pngfix，如果 PNG 没有“褪色”效果，它确实有帮助。但是一旦我应用这种淡入淡出效果，我就会遇到同样的问题。

以前一定有人解决过这个问题，所以请给我建议如何解决它。

我用谷歌搜索找到了this，但我真的不知道他的意思。

如果您需要更多信息，请告诉我...

顺便说一句，这适用于除 IE6、7 和 8 之外的所有主流浏览器。

谢谢

【问题讨论】：

标签： javascript html css internet-explorer browser

【解决方案1】：

是的，在透明 PNG 上设置 alpha 会将 alpha 通道完全替换为 opacity 值，因此透明部分会重新出现。

正如您链接的页面所说，您可以将alpha 过滤器放在包含 PNG 的元素上，这通常看起来更好，但该容器元素必须为hasLayout。在容器中添加height 或zoom 或其他任何内容，以触发IE 疯狂的hasLayout 废话。

尽管如此，这仍然不是很正确，因为您最终会得到每个像素具有该像素的 alpha 值和集合 opacity 的最小不透明度，而不是乘以不透明度。所以图像的半透明部分最终会出现错误的相对透明度。不过，它仍然可以作为淡入效果看起来相当不错。

在 IE9 之前的 IE 中无法做到完全乘法不透明度。

【讨论】：