Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 797
cbp Avatar asked Jun 17 '09 03:06

cbp


3 Answers

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.

like image 81
cbp Avatar answered Nov 01 '22 12:11

cbp


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]-->
like image 43
SpliFF Avatar answered Nov 01 '22 11:11

SpliFF


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!

like image 21
Alejandro García Iglesias Avatar answered Nov 01 '22 12:11

Alejandro García Iglesias