在 Internet Explorer 中用透明背景替换 PNG 图像答案

【问题标题】：Replacing PNG images with transparent background in Internet Explorer在 Internet Explorer 中用透明背景替换 PNG 图像
【发布时间】：2010-12-28 12:15:48
【问题描述】：

image1.png 和 image2.png 都是透明背景。

<script type="text/javascript">
    $(document).ready(function(){
        $("img#test").click(function() {
            $(this).attr("src", "image2.png");
        });
    });
</script>
<img id="test" src="image1.png">

上面的代码应该用 image2.png 替换 image1.png。但是在 Internet Explorer 6/7/8（兼容性视图关闭）中，它不会从背景中清除 image1.png，而只是将 image2.png 放在 image1.png 上。

如何在替换为 image2.png 之前从背景中完全动态删除 image1.png？

编辑

我在 base.css 中使用了以下代码来修复在 Internet Explorer 中显示透明 .png 图像的错误。

/* PNG 透明 */

.mypng img {

方位角：表达式（

this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "无”，

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "/static/images/transparent.gif"):(this.origBg = this.origBg?this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);

}

这是造成这个问题的原因吗？

【问题讨论】：

必须有更多的事情。我无法重现这个。您还在谈论“背景”，您确定没有任何 CSS 可以做到这一点吗？
@BalusC: IE 一切皆有可能:)
@Andreas：我在 IE6/7/8 中使用两个不同的透明 PNG 图像准确测试了这段代码 sn-p，它在所有方面都可以正常工作（除了 aplha 通道在 IE6 中不存在，但这是另一个问题）。
@BalusC，我在页面的样式表中添加了一些代码来修复显示透明 .png 图像错误的错误。也许这是问题的原因？

标签： jquery internet-explorer png background transparent

【解决方案1】：

您可以尝试使用$(this).after(); 并在要替换的图像之后添加新图像；最后做$(this).remove();

【讨论】：

这可行，但在切换图像时会导致一些闪烁。

【解决方案2】：

将 .png 修复代码替换为 DD_belatedPNG 后，之前的代码有效。

【讨论】：