How to maintain PNG alpha transparency when using “-ms-filter” property

Question

I have the following HTML:

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

And this css:

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

The problem with this occurs in both IE 8 and IE 7.

When the PNG image is subject to the -ms-filter or filter, its alpha transparency is ruined. Try it out and you will see. It is a bug in both IE 8 and IE 7.

Can I remove the "-ms-opacity" and "filter" properties applied in CSS? What is the syntax for this? (e.g. something like -ms-filter: "";)

Does anyone know a work around to this issue?

Answer 1

UPDATE: AlphaImageLoader filter applied directly to the img may override the Alpha filter. As for removing a filter have you tried filter:none; ?

Yes, programmically target IE6 and below with conditional comments.

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

Also scripts like IE7-js will handle PNG transparency for you without cluttering up your CSS with non-standard code.

<!--[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

Just embellishing SpliFF's answer, I could fix this problem by adding the following jQuery to my page:

$(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')";
        });
});

This will apply the AlphaImageLoader too all PNGs in the page.

Answer 3

For people looking for another answer, I solved this using this following code I wrote myself in plain JavaScript, so it's framework independent. Still you have to put it inside your framework's DOM ready event (or you can use domready.js like I did). It loads all the images with .PNG extension with the AlphaImageLoader. It has to be done before your apply the Alpha filter (you can apply the filter after this code with JS also).

The code below:

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 + "')";
        }
    }
}

Remember to put it inside conditional comments for IE:

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

Please let me know if it worked fine. Kind regards!