Log in

View Full Version : 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



<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
<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:


<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 (http://www.twinhelix.com/css/iepngfix/demo/) for this read manual....
TheJoshMan
10-30-2008, 09:03 PM
<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:



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