Question

我的图像后面有一个半透明的阴影，我在div中用作背景图像。我遇到了一个问题，当我淡入或淡出div时，半透明的阴影会出现黑色，直到淡入淡出完成。当我在FireFox中执行此操作时，它工作正常，我只能使用Internet Explorer 8重现错误。

您可以在此处看到它：http://jsfiddle.net/pVQER/2/

有谁知道为什么会这样？任何人都可以建议解决或修复？

更新

在我的真实世界示例中，此div位于另一个带渐变的背景图像之上，因此我认为设置背景颜色不起作用。

Answer 1

IE8透明淡入淡出问题的一般解决方案是使用背景将div元素包裹在元素周围，设置其背景颜色，然后淡化包装元素。

<强> HTML ：

<div id = 'bgWrap'><div id="bg">test the background</div></div><br/>
<button id="btn" type="button">Click Me!</button>

<强> CSS ：

#bg
{
    background-image:url('http://i.imgur.com/GlEyl.png');   
    height:200px;
    width:300px;
    border:1px solid;
    padding:5px;
}

#bgWrap {
     dispaly: none;
    background: #fff;
}

<强> JS ：

$('#btn').click(function() {
      $('#bgWrap').fadeToggle('slow');              
});

修改

您可以尝试将包装div的背景设置为1x1透明GIF / PNG，这样可以解决您的黑色背景问题，并让底层背景渐变显示出来。

Answer 2

这是我对你的CSS所做的改变：

    #bg {
    background:url(http://i.imgur.com/GlEyl.png) 0 0 #fff;   
    height:200px;
    width:300px;
    border:1px solid;
    padding:5px;
    display:none;
    }

我在background属性中添加了#fff。这项工作的想法是设置背景颜色以匹配它背后的背景。

不是很好的解决方案，但有效。

Link to code »

jQuery淡出IE 8中的投影错误？

2 个答案: