PNG Transparency Lost When Used With Opacity/Alpha in IE

Forum Moderators: not2easy

Message Too Old, No Replies

PNG Transparency Lost When Used With Opacity/Alpha in IE

chant9

9:35 pm on Oct 28, 2008 (gmt 0)

I'm trying to use a semi transparent PNG and have found that when using opacity/alpha the transparency of the PNG is lost in Internet Explorer. It works fine in Firefox but goes solid in IE.

A small small example of the problem is shown below, shadow.png would be a semi transparent drop-shadow which works fine normally, but breaks when I apply opacity/alpha. I need to use opacity/alpha as I'm fading an error message div in and out when required.

If anyone knows how to keep the PNG transparency when used with opacity/alpha, please help.

Thanks


<html>
<head>
<style type="text/css">
img {
opacity: 0.25;
filter: alpha(opacity=25);
}
</style>
</head>
<body>
<img src="shadow.png" />
</body>
</html>

essiw

9:57 pm on Oct 29, 2008 (gmt 0)

a time ago i tried to put a transparant .png (so no css i saved it with a transparant background) and looked in IE to see it has a light blue background, maybe the cause is that IE doesn't support .png or opacity, try .jpg or .bmp ;)

swa66

12:00 pm on Oct 30, 2008 (gmt 0)

That filter looks suspiciously too simple.

There are a number scripts out there that try to fix IE6 and lower lack of proper support for PNG images.
My personal favorite is to us IE7.js, but there are many solutions out there on the web.

From memory (I didn't actually try it right now), this worked (in the CSS):


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( 
          src='shadow.png',sizingMethod='scale');

(line break to prevent scrolling)
But it forces you to reference the content image in the CSS.
Way too messy to go about it in that fashion, hence the preference to a javascript solution.

Oh, BTW: make sure to hide all this nonstandard stuff from other browsers by using conditional comments.