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

我有一个内容元素，如果用户位于某个区域上方，它会淡入。内容元素有一个背景图像，在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>

我尝试了最高级的答案，但我无法设置背景：透明，因为我有背景图像

我还尝试创建一个包装器元素，如

HTML

那么我有什么选择呢？我只能在IE7/IE8中使用带有条件注释的不透明图像（看起来很难看）。我应该使用另一个动画吗？我是否应该使用悬停效果而不是动画（仅适用于IE7/IE8）？还有其他的补丁吗？

请参见CSS设置：

这方面的CSS是：不透明度=1

IE8及更早版本：过滤器：alpha（不透明度=100）

---

看来我已经成功了。正如我所说，我删除了不透明度参数：

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

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

---

这对我不起作用。我的解决方案来自。

你是说

？这里的不透明度来自

jQuery（'#TopPacketsContents'）。动画({opacity:1

。现在我删除了这里的不透明度，因为它并没有被真正使用。所以淡入可以工作，但淡出仍然有同样的问题。为什么jQuery没有解决这个问题呢？我能做什么？我对jQuery不太熟悉，无法参与到这一过程中来-我只是指出这一点（假设jQuery使用CSS）不透明度属性在IE8及更早版本中不起作用-您需要使用filter:alpha（不透明度=###）现在我发现此解决方案不适用于我的子页面。尽管路径正确，但背景图像仍会消失。因为没有找到解决方案，我从

hide

函数的参数中删除了

slow

。。。

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

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

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

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

#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");
}