Sent by Nick Fitzsimons on 2 February 2006 17:05
> AFAIK, png transparency "hacks" (rather, scripting) only works on
> foreground images, not the background-image property. Otherwise, for
> foreground image transparency, read about it here:
>
> http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Actually, it's the other way around: the AlphaImageLoader filter used to
force IE to honour PNG transparency applies the image in similar manner to
a background image, although it ignores such properties as
background-position.
The JavaScript code in the page you cite does the following:
element.src = blankSrc;
which replaces the image by making it load a transparent gif (I assume
that's what the author means by "a blank image"), and then does
element.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
which applies the pseudo-background-image using the original PNG image.
Although that example relies on scripting, the filter property is a
Microsoft extension to CSS, and JavaScript isn't required. Note that the
"behavior" (HTC component) on that page won't work if scripting is
disabled - a standard problem with all behavior- and expression-based
"fixes" for IE.
To get PNG background images to work, I use the normal background property
in a stylesheet imported by every (supported) browser:
background: #eaf5fb url(/blue_bullet.png) 0 0 no-repeat;
and then link in an additional stylesheet via an IE conditional comment,
which applies the following rules to the same element as the above:
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blue_bullet.png',sizingMethod='crop');
The important bit is the background-image being removed; if it's left
there, you'll get a transparent PNG with a broken PNG rendering showing
through the transparent regions. With variable transparency this might be
obvious, but if the transparency is 100% (the common case), it looks like
nothing's happened.
For inline images (<img> tags) the technique is similar, except using yet
another IE-only filter: the Alpha filter. So I have:
#imageContainer {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='crop');
}
#imageContainer img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
which makes the image 100% transparent, allowing the
pseudo-background-image applied to the containing element to show through.
I really must write all this up properly and link to it from the wiki;
I've got to know this stuff inside out over the last few months :-)
HTH,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
