Getting Alpha-Channeled PNG's to Work in Internet Explorer
Many people have discovered the use of alpha-channeled .PNG files to be a thing of beauty. Unlike the traditional .GIF format which supports total transparency, .PNG's allow for varying shades of transparency. Which is all well and good, until you try to get them to work in Internet Explorer 6 (or any IE < 7). So here's a tip on making them work across browsers:
1. Make your alpha-channeled PNG in Photoshop or other image editor of choice. Save it as a 24-bit .PNG (yes, a 24-bit PNG!) with alpha channeling enabled.
2. Since IE < 7 requires that alpha channeled .PNG's be used with a filter, that's what we'll do in the css. So say we assign the image in your html an id of #foo. You'll want to apply this rule to #foo:
#foo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/foo.png', sizingMethod='crop');}
And that's it... None of the other current browsers that support PNG transparency (Safari, Firefox/Mozilla, Opera, etc) will require any extra rules/instructions on how to treat the alpha-channeled PNG. Your transparecy works and you're done!
1. Make your alpha-channeled PNG in Photoshop or other image editor of choice. Save it as a 24-bit .PNG (yes, a 24-bit PNG!) with alpha channeling enabled.
2. Since IE < 7 requires that alpha channeled .PNG's be used with a filter, that's what we'll do in the css. So say we assign the image in your html an id of #foo. You'll want to apply this rule to #foo:
#foo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/foo.png', sizingMethod='crop');}
And that's it... None of the other current browsers that support PNG transparency (Safari, Firefox/Mozilla, Opera, etc) will require any extra rules/instructions on how to treat the alpha-channeled PNG. Your transparecy works and you're done!
posted by cyclona23 at 1:22 PM
2 Comments:
Values of 'sizingMethod' are 'scale', 'crop' and 'image'
I've found that 'image' will respect the dimensions of the src image, 'pushing' the container as needed, while 'scale' I found a little unpredictable.
I'd be interested to read other people's experiences with this attribute.
thx.
Hey, thanks for the tip !
It worked for, well, some of my picture.. Those were placed in div elements (relative).
One image, though, on another page didn't have so much luck..
The shade behind the image is pitch black and pixelized.. Arggh ! :)
The main difference is that this image is bigger (but only 248 ko) and that it's been placed in a AP Element.
Any idea what could be the reason for that ??
Post a Comment
<< Home