IE8 中的不透明度不起作用

Posted 2023-03-06

【中文标题】IE8 中的不透明度不起作用

【英文标题】：opacity in IE8 not working

【发布时间】：2012-05-04 23:44:08

【问题描述】：

我已经设置了覆盖层的不透明度，它在 FF、Chrome、Safari 和 IE9 中运行良好，但在 IE8 中没有。我google了很多，但没有找到任何解决方案。

我的css代码是

#overlayEffectDiv  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    width: 100%;
    height: 100%;
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.50;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
    /* hide it by default */
    display: none;

在 FF 中如下所示：

但在 IE8 中它看起来如下：

【问题讨论】：

你读过那个***.com/questions/1948176/…??

使用filter 而不是-ms-filter。后者只能在 IE9 及以上版本中使用。

@MrLister 不应该 filter 仅在 IE7（及更早版本）中工作？

嘿检查这个网址并了解不透明度quirksmode.org/css/opacity.html

使用 jquery 淡化效果例如破坏过滤器，也许你应该在这个方向搜索....

【参考方案1】：

我认为您的过滤器语法不正确：

http://blogs.msdn.com/b/ie/archive/2009/02/19/the-css-corner-using-filters-in-ie8.aspx

这可能不是问题的原因，但可能值得排除。

【参考方案2】：

也许你也定义了zoom。像这样写：

#overlayEffectDiv  
    width: 100%;
    height: 100%;
    filter: alpha(opacity = 50);
    opacity: 0.50;
    *zoom:1;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
    display: none;

【参考方案3】：

如果某些涉及图层的动画效果出现问题，您可以完全避免在 IE 中使用filter，而是使用一个小的（不要太小，如 2x2，例如 100x100）透明的@987654322 作为重复背景@ 具有黑色背景颜色和 ~80% 不透明度的文件

【参考方案4】：

找到解决方案here。不透明度不是问题，我做了一些调试，发现它对 ie8 工作正常，问题出在 jquery fadeIn 和 fadeOut。 jQuery fadeIn 使半透明背景变为实心。

感谢所有帮助过的人。