IE 8 上的定位和图像透明度失败

Question

我正在尝试将几张图片放在另一张图片上，然后我在顶部淡入淡出这些图片，这是我的 css：

#spark1 {
    bottom: 211px;
    left: 252px;
    position: relative;
    width: 75px;
}
#spark2 {
    bottom: 100px;
    left: 286px;
    position: relative;
    width: 50px;
}

我的 HTML：

<div id="spark1">
    <img src="clientside/images/big_sparkle.png" />
</div>
<div id="spark2">
    <img src="clientside/images/little_sparkle.png" />
</div>

我的淡入淡出效果（如果这与我面临的问题有关）

$(function(){
    setInterval(function() {
        $('#spark1').fadeOut(800).fadeIn(800);
        $('#spark2').fadeOut(1000).fadeIn(1000);
    }, 2000);
});

在 Firefox 和 chrome 上一切看起来都不错，但是在 IE 8 上（尚未在任何早期版本的 IE 上测试过），闪光图像的位置错误，它的背景是黑色而不是透明，我该如何处理？ ?谢谢

问候

更新：

我尝试了一些 css 解决方法，但似乎没有任何效果（可能是因为我以错误的方式应用它：p），但最后我找到了一个稍微方便的解决方案，我将这一行放在我的 jquery 淡入淡出效果之后：

$("#spark1").css('filter', 'none');

这个css到我的img：

#spark1 img{
        background: transparent;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";  IE8    
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);    IE6 & 7 */      
        zoom: 1;
    }

感谢pekka 向我指出这些文章，我想我现在会坚持使用这个解决方案

Answer 1

如果您的 PNG 具有 alpha 透明度，那么实际上即使在 IE8 中也存在一个错误：无法将具有 alpha 透明度的图像设为透明（= 给定的 opacity 值不是 1）。

有关背景信息和解决方法，请参阅 this question。