PNG Transparency Lost When Used With Opacity/Alpha

**andygrant** · 10-28-2008, 09:45 PM

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

Code:

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

**Medyman** · 10-29-2008, 01:13 PM

Are you talking about IE6 or IE7?

**bokanegro** · 10-30-2008, 12:27 PM

Code:

<style type="text/css" media="screen">
#logo{
    height: 90px;
    width: 280px;
    background:url("shadow.png") 0 0 no-repeat;
}
*html #logo {
    background:none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shadow.png', sizingMethod='image');
}
</style>

Then call this:

Code:

<div id="logo"></div>

Replace #logo with your on DIV ID and set right height and width....

This will do the job!!!!

Or you can try this

IPNG FIX for this read manual....

**TheJoshMan** · 10-30-2008, 09:03 PM

Code:

<style type="text/css" media="screen">
#logo{
    height: 90px;
    width: 280px;
    background:url("shadow.png") 0 0 no-repeat;
}
*html #logo {
    background:none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shadow.png', sizingMethod='image');
}
</style>

That would put unnecessary strain on IE7...

You should use something like this to exclude this code from IE7:

Code:

<!--[if IE lte 6]>
<style type="text/css">
#logo{
    height: 90px;
    width: 280px;
    background:url("shadow.png") 0 0 no-repeat;
}
*html #logo {
    background:none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shadow.png', sizingMethod='image');
}
</style>
<![endif]-->

Thread: PNG Transparency Lost When Used With Opacity/Alpha

Thread Tools

Search Thread

PNG Transparency Lost When Used With Opacity/Alpha

Bookmarks

Bookmarks

Posting Permissions