asked on

Alpha PNG support in IE7 and 8

I have made some gradient images that are a solid color that fade to transparent. Some of the images are very large, as to be backgrounds.

We also apply a transparency to these pngs. I cannot figure out why IE7 and 8 won't render the PNG's correctly. I have had to resort to using the old AlphaImageLoader. For some reason this makes it so it doesn't render my alpha opacity! If I then use jQuery to change the opacity then the png breaks and becomes a solid black background, instead of looking like a gradient) with the correct opacity applied.

It is not an option for us to use photoshop to just make the image more transparent, it has to be with css.

DD_belatedPNG of course fixes it but it is causing other very undesirable functionality on our site.

Here is some code:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/gradient.png',sizingMethod='scale'); filter:alpha(opacity=60);

/* the above shows the png correctly but not the opacity, using the following jQuery breaks the PNG*/

$('#sitePageGradient').css('opacity', 0.6);

Open in new window

Steve Krile

Have you tried the $.fadeTo() jquery effect. I believe they baked in opacity goofiness with IE into that effect.

$('#sitePageGradient').fadeTo("fast",0.6);

Shaye Larsen

ASKER

k, thanks. Same thing though. I wish I could get you a test to look at but I am developing locally and currently can't get an example on line.

I have checked that the selector is correct when targeting #sitePageGradient for the effect but no go.

Steve Krile

You could attach the png to this question and I could play with it.

Shaye Larsen

ASKER

Here is the image:
gradient.png

Steve Krile

OK, so, when I do this simple example and view it in IE 7, IE 8, FF, Chrome, and Safari, everything looks ok. That is, the red "bleeds" through as expected.

IE 6 of course botches everything PNG, but you didn't seemed concerned about that (as you should not be! :)).

Can you confirm that my simple example works for you?
gradient.zip

Shaye Larsen

ASKER

Okay, yeah, but now add:

filter:alpha(opacity=60)

Open in new window

Shaye Larsen

ASKER

Correct, we are not supporting IE6 :)

Steve Krile

I think I've found the issue. You need a background color for IE to behave. Try setting the background color of .body to "red" and applying your filter. Looked good on my end.

So, to be clear, setting the background color of "Transparent" will cause IE to behave badly.

ASKER CERTIFIED SOLUTION

Steve Krile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

It works set up like that but we cannot have the color declared with the background on the same layer as the gradient. We have other design peices that have to bleed through and be seen behind the gradient.

Steve Krile

Can you give me a sample of the layers you are working with? There are a couple ways around this "problem" but I need to know a bit more about your structure.

Shaye Larsen

ASKER

There is a pattern later, a background image layer, a gradient layer, and a color layer. The tool we are building allows to layer these layers from a UI, so a user can put them in any order. The other layers are the same as the gradient layer, even use PNGs, but do not break. It only breaks on a PNG that has a gradual fade/feather effect. We are successfully changing the other layers' opacity and they work fine. The patterns are simple grayscale PNGs that have no feather effect, the transparent parts are where the edge of the pattern ends, and they work fine.

Steve Krile

Well, if you are setting the opacity of the ENTIRE thing with the background, having a background color of white will effectively "lighten" the background. But, since you can "see through" it, just set the opacity to a lighter amount (30%) and the effect should be close to what you want.

Shaye Larsen

ASKER

Yeah, that would work but everything is user defined. The opacity, the specific gradient (there are well over a thousand). And same with the other layers. :(

SOLUTION

Steve Krile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

Thanks for your help. I agree that our situation is rare and this does not apply to most cases. I rated the solution as partially complete because it solved for most users but not for my case. I may need to open another question to address the problem of why can't you have a transparent PNG with opacity without a background-color specified.

Thanks again!