David Hucklesby wrote:
> Emanuele Venezia wrote:
>>
>> Wouldn't it be enough to use a semi-transparent image as background for the
>> contained
>> div? (it would be CSS21 compliant, too)
>>
>
> Absolutely. Sadly, though, the most used browser today, IE6, will not
> apply alpha transparency to repeated background images. To my
> knowledge, anyway - not even with "PNG Fix":
>
> <http://www.twinhelix.com/css/iepngfix/>
That's not true. The part you've been missing is the sizingMethod param
to AlphaImageLoader() [1]. You need to scale it.
I've used a translucent image as a BG on several occasions to get around
this exact problem. Open a 2x2 pixel image [2] in Photoshop or GIMP,
fill with white, and set your desired transparency. I like to make
several and name them like, 'bg_FFF_30.png', etc.
For IE one can use, eg. pngbehavior.htc [3] or something along the lines of:
-- snip --
// [4]
var trans_boxes = document.getElementsByClassName('div', 'whatever');
for (var i = 0; i < trans_boxes.length; i++)
{
setPNGBGImage(trans_boxes[i]);
}
function setPNGBGImage(el)
{
var blankSrc = '/images/spacer.gif';
/* parse out the existing BG image
*/
var bgImageSrc = el.currentStyle.backgroundImage;
bgImageSrc = bgImageSrc.substring( bgImageSrc.indexOf('url("') + 5,
bgImageSrc.indexOf('")') )
/* sub in the GIF foor poor, old IE
*/
el.style.backgroundImage = 'url(' + blankSrc + ')';
/* run the magic filter [5]
* note the sizingMethod='scale'
*/
el.runtimeStyle.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bgImageSrc
+ "',sizingMethod='scale')";
}
-- snip --
[1] http://msdn2.microsoft.com/en-us/library/ms532969.aspx
[2] Be sure to use a 2px-wide image because Safari 2.x has a bug that'll
cause a 1-pixel image to become opaque. This was a rather ugly surprise
when Safari was updated with Tiger.
[3] http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
[4] I'll leave it as an exercise to the reader to find their favourite
getElementsByClassName(). This is a CSS list, after all.
[5] Admittedly, this filter is not the panacea it may seem. It has been
known to cause much gnashing of teeth with regard to, say, links no
longer working. Another exercise for the reader, i guess.
brian
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
