如何在使用＆＃8220; -ms-filter＆＃8221;时保持PNG alpha透明度。属性

Question

我有以下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 或过滤器约束时，其alpha透明度将被破坏。尝试一下，你会看到。这是IE 8和IE 7中的一个错误。

我可以删除“-ms-opacity”吗？和“过滤器” CSS中应用的属性？这是什么语法？ （例如 -ms-filter：＆quot;＆quot ;; ）

是否有人知道解决此问题的方法？

Answer 1

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

是的，通过条件评论以程序方式针对IE6及以下版本。

<!--[if lt IE 7]>
<style>a:hover{filter: 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]-->

Answer 2

只是修饰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')";
        });
});

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

Answer 3

对于寻找另一个答案的人，我使用以下代码解决了这个问题，我在纯JavaScript中编写了自己的代码，因此它与框架无关。仍然你必须把它放在框架的DOM ready事件中（或者你可以像我一样使用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的条件评论中：

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

如果工作正常，请告诉我。 亲切的问候！