IE7 / IE8 中的背景图像（透明 24 位 PNG）褪色问题

Question

如果用户在某个区域上方，我有一个内容元素会淡入。内容元素有一个背景图片，在 IE7/IE8 中只有一个大的黑色边框，而不是渐变色。

动画代码：

$(function(){
 $('#TopPackets').mouseenter(function(){
 jQuery('#TopPacketsContents').animate({
   opacity: 1,
   width: 'toggle'
 }, 307, function() {
 });
 });

 $('#TopPackets').mouseleave(function(){
   jQuery('#TopPacketsContents').hide('slow');
 });
});

现在是带有透明背景图片的内容元素：

<div id="TopPacketsContents" style="opacity: 1; display: none;">
    <!-- content -->
</div>

CSS：

#TopPacketsContents {
 background-image: url("../images/transparentBackground.png");
 background-repeat: no-repeat;
 height: 303px;
 width: 411px;
}

我尝试了this thread 的最高回答，但我无法设置背景：透明，因为我有背景图片！

我还尝试创建像 on this page 这样的包装元素。

HTML

<div id="TopPacketsContents">
    <div class="BackgroundImageWrapper">    
        <!-- content -->
    </div>
</div>

CSS

#TopPacketsContents {
    height: 303px;
    width: 411px;
}
.BackgroundImageWrapper {
    background-image: url("../images/TopPacketsBackground.png");
    background-repeat: no-repeat;
}

那么我有哪些选择？我只能为带有条件 cmets 的 IE7/IE8 使用非透明图像（看起来很难看）。我应该使用另一个动画吗？我应该使用悬停效果而不是动画（仅适用于 IE7/IE8）吗？还有其他修复方法吗？

Answer 1

请参阅W3Schools on the opacity CSS 设置：

为此的 CSS 是：opacity=1。

IE8 及更早版本：filter:alpha(opacity=100)。

Answer 2

似乎我得到了这个工作。正如我所说，我删除了不透明度参数：

<script type="text/javascript">
  $(function(){
    $('#TopPackets').mouseenter(function(){
    jQuery('#TopPacketsContents').animate({
      width: 'toggle'
    }, 307, function() {
    });
    });

    $('#TopPackets').mouseleave(function(){
      jQuery('#TopPacketsContents').hide('slow');
    });
  });
</script>

带有过滤器的新 CSS：

#TopPacketsContents {
    width:411px;
    height:303px;
    background-image:url(../images/transparentBackground.png);
    background-repeat: no-repeat;
    /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/images/transparentBackground.png", sizingMethod="crop");
}

following answer 对我不起作用。我的解决方案来自this answer。