使用“-ms-filter”属性时如何保持 PNG alpha 透明度

Posted 2023-03-06

【中文标题】使用“-ms-filter”属性时如何保持 PNG alpha 透明度

【英文标题】：How to maintain PNG alpha transparency when using "-ms-filter" property

【发布时间】：2010-11-03 13:09:30

【问题描述】：

我有以下 html：

<a><img src="myfile.png" /> Some text</a>

还有这个css：

a:hover

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: .75;

IE 8 和 IE 7 都会出现此问题。

当PNG图像受制于-ms-filter或filter时，它的alpha透明度被破坏了。试试看，你会看到。这是 IE 8 和 IE 7 中的一个错误。

我可以删除 CSS 中应用的“-ms-opacity”和“filter”属性吗？这个的语法是什么？ （例如像 -ms-filter: "";）

有人知道解决这个问题的方法吗？

【问题讨论】：

我认为我们没有理解您的问题。你可以试试改写吗？

@SpliFF 等。 - 有人可以添加（或编辑）一个答案，以提供在 IE 7 和 8 中以 75% 的不透明度制作具有部分透明显示的 png 所需的 css。这是原始问题，没有完整的答案。

【参考方案1】：

只是修饰 SpliFF 的答案，我可以通过将以下 jQuery 添加到我的页面来解决这个问题：

$(function() 
    if (jQuery.browser.msie)
        $('img[src$=".png"]').each(function()  // must have quotes around .png
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        );
);

这将应用 AlphaImageLoader 页面中的所有 PNG。

【讨论】：

这个小脚本（以及我想褪色的图像周围的一些跨度标签）对于那些不得不与 MSIE 可憎的东西搏斗的人来说是一个奇迹和宝藏。

【参考方案2】：

更新：AlphaImageLoader 过滤器直接应用于 img 可能会覆盖 Alpha 过滤器。至于删除过滤器你试过filter:none;吗？

是的，使用条件 cmets 以编程方式针对 IE6 及更低版本。

<!--[if lt IE 7]>
<style>a:hoverfilter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);</style>
<![endif]-->

此外，IE7-js 之类的脚本将为您处理 PNG 透明度，而不会用非标准代码弄乱您的 CSS。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

【讨论】：

对不起，我对 IE 6 不感兴趣 - 我试图在使用“-ms-filter”或“filter”css 属性时使其在 IE7 和 IE8 中工作。

该解决方案也适用于 ie7。只需将条件更改为 lt IE8 并将脚本更改为 ie8.js

但问题甚至出现在 IE 8 中：当您在 CSS 中应用 'filter' 或 '-ms-filter' 属性时，任何 PNG alpha 透明度都不再起作用。

啊..好吧，我误解了这个问题。也许尝试将 AlphaImageLoader 过滤器直接应用于图像，看看它是否会覆盖 A 上的 Alpha 过滤器。

好吧，我还需要删除样式覆盖中的过滤器（想想 .loading 或 .active css 类），filter:none 不起作用:(

【参考方案3】：

对于寻找其他答案的人，我使用以下代码解决了这个问题，我自己用纯 JavaScript 编写，因此它是独立于框架的。您仍然必须将它放在框架的 DOM 就绪事件中（或者您可以像我一样使用 domready.js）。它使用 AlphaImageLoader 加载所有带有 .PNG 扩展名的图像。必须在应用 Alpha 过滤器之前完成（您也可以在此代码之后使用 JS 应用过滤器）。

以下代码：

var i;
for (i in document.images) 
    if (document.images[i].src) 
        var imgSrc = document.images[i].src;
        if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') 
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        
    

记得把它放在 IE 的条件 cmets 中：

<!--[if IE]><![endif]-->

请让我知道它是否工作正常。 亲切的问候！