IE 8 中带有阴影的 jQuery fadeIn 错误？

发布于 2024-12-08 17:35:27 字数 383 浏览 0 评论 0原文

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

您可以在此处查看它的运行情况：http://jsfiddle.net/pVQER/2/

有谁知道为什么会发生这种情况？任何人都可以建议解决方法或修复吗？

更新：

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如果没结果 2024-12-15 17:35:27

解决 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 ，这应该可以消除黑色背景问题，并让底层的背景渐变显示出来。

The general solution to IE8's transparent fade problem is to wrap a div element around the element with the background, set its background color, and fade the wrapper element instead.

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

Edit

You can try setting the wrapper div's background as a 1x1 transparent GIF/PNG, which should get rid of your black background problem as well as let the underlying background gradient show through.

回复收藏 0 原文

记忆消瘦 2024-12-15 17:35:27

这是我对 CSS 所做的更改：

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

我在背景属性中添加了 #fff。此解决方案的想法是设置背景颜色以匹配其背后的背景。

不是一个很好的修复，但有效。

代码链接 »

This is the change I made to your CSS:

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

I added #fff in the background property. The idea for this work around is to set the background color to match whatever the background behind it is.

Not a great fix, but works.

Link to code »

回复收藏 0 原文

~没有更多了~