IE中的PNG：为部分透明的img切换不透明度？答案

【问题标题】：PNG in IE: toggle opacity for partially transparent img?IE中的PNG：为部分透明的img切换不透明度？
【发布时间】：2011-08-07 08:30:12
【问题描述】：

我有一个部分透明的 PNG 图像文件。我需要切换它的不透明度。

目前我正在使用以下 CSS 代码来允许不透明度：

filter:alpha(opacity=50);

但是，IE 无法处理 PNG 的透明部分。当我尝试通过添加以下 CSS 来修复它时：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');

好吧，它不起作用。我的问题是：人们发现这个问题的最佳解决方案是什么？我应该将PNG转换为GIF吗？还是有更优雅的解决方案？

谢谢。

【问题讨论】：

我知道这不是您想要的，但我可能会求助于使用 jQuery 来设置透明度，因为它们在确保跨浏览器兼容性方面已经走了很长一段路。但是，这不是一个仅用于样式的解决方案。 ://

标签： css internet-explorer png transparency opacity

【解决方案1】：

IE 的filter 风格是一团糟。它确实允许浏览器执行一些超出其范围的技巧，但它是非标准的，并且存在一些重大问题。

如果没有看到你完整的 CSS，我无法确定，但在我看来，你好像被 filters 最大的“陷阱”怪癖之一抓住了：

如果您需要指定多个过滤器，则必须将它们一起指定。如果您单独指定它们，就像您在示例中所做的那样，第二个filter 会覆盖第一个，即使它们实际上执行的是完全不同的操作。这实际上与 CSS 样式表的一般工作方式是一致的，但由于 filter 能够做的事情的范围，这是违反直觉的。

您可以在单个filter 样式中指定多个过滤器，以空格分隔。

参考这里：http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

这种方法的问题是显而易见的，如果您想在样式表上通过不同的类名触发不同的效果——因为没有办法将来自不同来源的过滤器组合到同一个元素中。

另一个可能会引起你注意的大问题是，使用progid: 语法编写的过滤器实际上是由于冒号而导致的无效 CSS，这足以导致一些非 IE 浏览器阻塞整个样式表.这可以通过使用简写语法（根据您的第一个示例中的alpha() 过滤器）来防止，对于 IE6 和 IE7，或者对于带有 -ms-filter 替代方案的 IE8，使用更长的语法，将整个内容括在引号中.

这是一个例子：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/translucent_effect.png', sizing Method='scale');"

希望对您有所帮助。

【讨论】：