Question

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

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

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

<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没有“淡入淡出”效果，它确实有用。但是一旦我应用这个淡入淡出效果，我就会遇到同样的问题。

有人必须先解决这个问题，所以请给我一些解决方法。

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

如果您需要更多输入，请告诉我......

顺便说一句，这适用于所有主流浏览器，但IE6,7和8。

由于

Answer 1

是的，在透明PNG上设置alpha会使用opacity值完全替换Alpha通道，因此透明部分会重新进入视图。

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

但是，它仍然不太正确，因为你最终得到的每个像素具有该像素的alpha值和集合opacity的最小不透明度，而不是乘以不透明度。因此，图像的半透明部分最终会产生错误的相对透明度。尽管如此，它仍然可以看作很好的淡入效果。

IE9之前无法在IE中完全乘法不透明。

Internet Explorer中的淡化PNG无法正常工作

1 个答案: