Help me learn to create semi-transparent PNGs for use on the web.

September 20, 2005 5:53 PM

Help me learn to create semi-transparent PNGs for use on the web. Those I'm creating in Macromedia's Fireworks don't seem to work in IE -- even when I use the appropriate IE-specific image filters.

It would seem that I know how to use semi-transparent PNGs as css-specified backgrounds, but not how to create them. I've been succesful when someone else has created them first -- but my own attempts at creating them in Fireworks seem to result in totally transparent failures.

For example, I've tried to copy the fine article on daltonlp.com:

Failed Transparency Example Set 1

Note that both examples on that page work when viewed in Firefox. Note that only the first one works in IE. The same technique is used in both examples in that set. I believe the only difference is the image.

I also tried the IE-only, inline-styled example with fewer moving parts from the canonical ALA article:

Failed Transparency Example Set 2

Note that again, the first example works in IE, and the second doesn't (neither example works in anything but IE).

So: other PNGs work, my Fireworks-spawned PNGs do not. Has anyone else had this kind of problem? In two of the comments after the daltoplp.com article, some individuals mentioned they'd had this same problem using Photoshop, but no one followed up with a solution.

My conclusion is that either (A) there's something I don't know about how to properly export PNGs from Fireworks, or (B) IE struggles with something specific about Fireworks PNGs.

Either way, I could "clearly" use some advice on the semi-transparent PNG creation process.

posted by weston to computers & internet (8 comments total)

I'm mostly guessing here, but I think it has something to do with the images being png-24 versus png-8, plus a little IE weirdness. It still seems like there's something weird going on, if you're using the same technique to export and getting different results each time, but . . . read some of these results, especially this one.
posted by littlegreenlights at 6:06 PM on September 20, 2005

Hmmm. The article you point to said the 24-bit format is the one that's got the alpha-transparency. I believe I may have done 8-bit in those examples. I'll try adding a 24-bit example to the daltonlp method...
posted by weston at 6:21 PM on September 20, 2005

Shouldn't RGBA be 32-bit? 0-255 Red, Green, Blue, and Alpha?
posted by Ryvar at 6:54 PM on September 20, 2005

Try using Inkscape. Its a vector graphics program, but it lets you import bitmaps and write to PNGs. It handles partial transparency easily, and can all the stuff you linked to. And its free!
posted by gsteff at 7:05 PM on September 20, 2005

Ah.

What a horrible and stupid misnomer.
posted by Ryvar at 7:09 PM on September 20, 2005

I believe Internet Explorer just flat-out doesn't support alpha transparency. There's a JavaScript work-around, but I'm not sure if works for backgrounds. See more at this A List Apart article.

Supposedly this will be fixed in IE 7, which should have market saturation in, oh, four or five years from now. Gotta love the innovation Microsoft brought to the browser market.
posted by stopgap at 7:12 PM on September 20, 2005

Supposedly this will be fixed in IE 7, which should have market saturation in, oh, four or five years from now.

This is offtopic, but: IE7 will be a Windows XP update.

It won't be backported to Win2k, more's the pity.
posted by Ryvar at 7:18 PM on September 20, 2005

What a horrible and stupid misnomer.

Hmmm. Fireworks does indeed list both PNG32 and PNG24 as output options, along with PNG8.

And, sure enough, PNG 32 works with the transparency hack in IE:

Transparency Example Set 2, with 24, and 32 bit PNGs added

Thank you!
posted by weston at 7:35 PM on September 20, 2005 [1 favorite]