467,074 Members | 938 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

PNG loses transparency when opacity filter is applied in IE7

Hi everyone. The title says it all.

I have a collection of PNGs with drop shadows. They work great in IE7 and FF.
If I add filters in my stylesheets, such as

icon {
filter: alpha(opacity=10);
-moz-opacity: .10;
opacity: .10;

then the PNG shadows all turn into solid black pixels (even If I say opacity 100).
Has anyone ever dealt with this issue? This is for an internal application for use by only a few dozen people, so I am not against hacks.
Feb 18 '08 #1
  • viewed: 2905
4 Replies
Expert 4TB
IE6 has never worked with alpha transparency on png although ALL other browsers have for years. IE7 does though. Here is one hack to fix IE.

btw, modern browsers understand 'opacity' so it's not necessary to use '-moz-opacity'
Feb 18 '08 #2
Thanks for the reply. I will drop the -moz line.

I had actually already looked at that hack from a google search, but I didn't think that applied as it was meant for IE6, which we don't use.

IE7 displays transparent PNGs just fine unless the filter is applied, regardless of whether its from a stylesheet or a javascript event handler.

For example, I have a button that toggles the icon to 10% opacity. It loads fine with a shadow, then you hit the button and the shadow of the icon suddenly turns solid. If I toggle it back to 100%, the image is still solid.

If I can't get it working, there's always Flash.
Feb 18 '08 #3
Expert 4TB
I don't know how I got IE6 out of that.

I don't know anything about 'filters' either as I would never use them.
Feb 18 '08 #4
Expert 1GB
I think there's a problem with IE7 displaying PNGs.

Make a PNG image (w/o alpha) and then save it as GIF or JPG.
Embed them together in an HTML file and open it in IE7.
There would be a difference in the colors of PNG from GIF (or JPG) while in Firefox, they'll look same.

But talking about filters, the DOM for images' filters are different in IE from others..

IE - imageObject.style.filter.opacity = 0 to 100
Others - imageObject.style.opacity = 0.00 to 1.00
Feb 18 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Simon | last post: by
2 posts views Thread by mattaku | last post: by
1 post views Thread by chris@chrisbeach.co.uk | last post: by
1 post views Thread by dave | last post: by
2 posts views Thread by ivowel@gmail.com | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.