PNG Transparency Lost When Used With Opacity/Alpha

Discussion in 'CSS' started by chant9, Oct 28, 2008.

0
  1. #1
    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>
    Code (markup):
     
    chant9, Oct 28, 2008 IP
  2. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    IE hates png's. It does not display them correctly. Save your files as gif's instead and they should work.
     
    LeetPCUser, Oct 30, 2008 IP
  3. keyaa

    keyaa Peon

    Messages:
    137
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #3
    IE developers should be slapped all day for not having implemented PNG properly years ago.
    If the images are part of your layout and not user-generated content, I'd set the opacity by editing them.
     
    keyaa, Nov 2, 2008 IP