在 Internet Explorer 上淡化图像透明度答案

【问题标题】：Fading Image transparency on Internet Explorer在 Internet Explorer 上淡化图像透明度
【发布时间】：2011-05-24 22:49:49
【问题描述】：

我正在使用一些 javascript 来淡化图像：从一个到下一个淡化的图像库。图像也可以叠加标题。标题后面的图像稍微淡出，因此可以更清晰地看到标题：

background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); /* Older IEs */
opacity: 0.75; /* Real browsers */

但是，在 Internet Explorer 中，您会看到标题后面的下一张图片。这并不理想。 Demo.

参见此处（屏幕截图），在标题下方显示下一张图片：

注意：这个问题出现在 IE7、IE8 和 IE8 模拟 IE7 中。有人告诉我，它在 IE9 中是看不到的，即使 IE9 用于模拟以前版本的 IE。模拟器明显不完善。

【问题讨论】：

另请注意，说明什么版本的 IE 会有所帮助，目前只有 4 个。
我在 IE7 和 8 中看到过。我想在 IE6 中也好不到哪里去，但我没有检查过。看一下演示。
@TRiG - 我看过 IE7、IE8、IE9 和 Firefox 3.6 中的演示，就我所见，它们看起来完全一样。标题后面的图像与屏幕上当前显示的图像相同。我不认为您可以包含显示问题的图像吗？
我会尝试抓取屏幕。如果图像都是相同的形状或具有更多对比色，这可能有助于使事情更加明显。
@My Head Hurts，Screengrab 添加。感谢您的建议。

标签： javascript css image

【解决方案1】：

IE 无法处理opacity-属性。您需要使用 hack：

background: #fff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */
filter: alpha(opacity=75); /* older IEs */
opacity: 0.75; /* modern browsers */

请注意，这些过滤器使用的范围是 0 到 100，而不是 0.0 到 1.0。像 jQuery 这样的框架会为你做这件事，如果你动态分配样式，这真的很方便。

【讨论】：

@elusive - filter: alpha (...) 适用于 IE8 及更高版本，因此您不需要 -ms-filter 属性。还是 -ms-filter 有什么特别的作用？
@My Head Hurts：这是 Quirksmode 和兼容模式中某些问题的解决方法。您应该添加它以确保安全。顺序在这里也很重要。
我实际上也有这两个。没有把完整的 CSS 放在问题中是我的愚蠢。我会添加它。看看演示。
@elusive - 谢谢，我不知道。如果顺序很重要，-ms-filter 不应该在 filter:... 之后作为样式级联，还是 "progid:..." 在 / 内为以下 filter 设置一个值？
@My Head Hurts：您需要使用我的示例中所述的顺序。否则，IE 7 兼容模式下的 IE 8 不会应用不透明度（不要问我为什么）。