IE 中的 PNG：切换部分透明图像的不透明度？
我有一个部分透明的 PNG 图像文件。我需要切换它的不透明度。
目前，我使用以下 CSS 代码来允许不透明度：
filter:alpha(opacity=50);
但是，IE 无法处理 PNG 的透明部分。当我尝试通过添加以下 CSS 来修复它时：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');
好吧，这不起作用。我的问题是：人们找到的解决这个问题的最佳解决方案是什么？我应该将 PNG 转换为 GIF 吗？或者有更优雅的解决方案吗？
谢谢。
I have an PNG image file that is partially transparent. I need toggle its opacity .
Currently I am using the following CSS code to permit opacity:
filter:alpha(opacity=50);
However, IE has trouble handling the transparent portion of the PNG. When I try to fix it by adding the following CSS:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');
Well, it doesn't work. My question is: what is the best solution that people have found to this problem? Should I just convert PNG into GIF? Or is there a more elegant solution?
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
IE 的
filter风格是一团糟。它确实允许浏览器执行一些超出其范围的技巧，但它是非标准的，并且存在一些重大问题。如果没有看到你完整的 CSS，我无法确定，但在我看来，你好像已经被
filter最大的“陷阱”怪癖之一抓住了：如果你需要指定超过一个过滤器，您必须将它们一起指定。如果您单独指定它们，就像您在示例中所做的那样，第二个过滤器将覆盖第一个过滤器，即使它们实际上执行完全不同的操作。事实上，这与 CSS 样式表的一般工作方式一致，但由于
filter的作用范围而违反直觉。您可以在单个
filter样式中指定多个过滤器，并用空格分隔。请参阅此处以获取参考：http://msdn .microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx
如果你想有不同的效果，这种方法的问题是显而易见的由样式表上的不同类名触发 - 因为无法将不同来源的过滤器组合到同一元素中。
另一个可能让您感到困惑的问题是，由于冒号，使用
progid:语法编写的过滤器实际上是无效的 CSS，而且这足以导致一些非 IE 浏览器卡住。整个样式表。对于 IE6 和 IE7，或者对于 IE8 使用-ms-filter 替代方案，使用较长的语法，将整个内容用引号引起来。这是一个例子：
希望有帮助。
IE's
filterstyle is a horrible mess. It does allow the browser to do a few tricks that would otherwise be out of its scope, but it is non-standard, and has some major issues.I can't be certain without seeing your complete CSS, but it looks to me as if you've been caught out by one of
filters biggest 'gotcha' quirks:If you need to specify more than one filter, you have to specify them together. If you specify them separately, as you've done in your example, the second
filteroverrides the first, even though they are in fact performing completely different actions. This is in fact consistent with the way CSS stylesheets work in general, but is counter-intuitive because of the scope of whatfilteris able to do.You can specify multiple filters in a single
filterstyle, separated by a space.See here for a reference: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx
The problems with this approach are obvious, if you want to have different effects triggered by different class names on your stylesheet -- because there's not way to combine filters from different sources into the same element.
The other big gotcha which might catch you out is the fact that filters written with the
progid:syntax are actually invalid CSS due to the colon, and it's bad enough to cause some non-IE browsers to choke on the entire stylesheet. This can be prevented by using the shorthand syntax (as per thealpha()filter in your your first example), for IE6 and IE7, or for IE8 with the-ms-filteralternative, using the longer syntax, enclosing the whole thing in quotes.Here's an example:
Hope that helps.