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;
}

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

Answer 1

请参阅CSS的W3Schools on the opacity设置：

这个的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获得了我的解决方案。

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

2 个答案: