ok, I'll join :)
> http://s318194674.websitehome.co.uk/index.php?option=com_content&view=
> a
> rticle&id=132&Itemid=1
> > I was trying to apply a white, 50% opaque, background colour to a
> > wrapper via CSS and see what happened! I have no idea CSS could do
> > something like that!
> >
> [...]
> >
> > Here is the css (4 lines!):
> > http://css-tricks.com/css-transparency-settings-for-all-broswers/
> >
>
> As already suggested, a semi-transparent PNG will work in most
> browsers, with the exception of IE before version 7. You can use a
> filter for that browser.
>
> You can combine RGBA background-color with an image for older
> browsers, and a filter for IE 5/6 like this:
>
> div.wrapper-body {
> background: url(images/white-50pct-1px.png);
> background: rgba(255, 255, 255, .5);
> }
For older "decent" browsers, it is possible to save an HTTP request by using
a data uri.
For example this is a PNG #000 with 80% opacity:
.wrapper-body {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA
fFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdA
P7DMAAAAASUVORK5CYII=);
}
> /* IE 5-6 only */
> * html div.wrapper-body {
> background: transparent;
> filter:
> progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,end
> C
> olorstr=#80ffffff);
> height: 1%; /* give IE "layout" */
> }
It may be safer to use zoom:1 here (unless support for IE 5.0 is a
requirement), just in case this element ends up being styled with
overflow:hidden (besides, it does not create a validation issue since a
filter is used already).
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
