Wade Smart wrote: > What I was thinking was doing a transparent effect on each row. > .even { > background-color: #E0E0E0; > opacity:0.5; > filter: alpha(opacity=50); > } > That didnt work so my question is - can this ONLY work on a image and > now on a color?
One solution I've used to achieve something similar looks like this: The CSS ~~~ <style type="text/css"> div.transparent-bg { background: url(http://www.domain.tld/1px-999999-50.png); background: rgba(153,153,153,0.5); } </style> <!--[if lt IE 7]><style type="text/css"> div.transparent-bg { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#77999999, endColorstr=#77999999); zoom: 1; } </style><![endif]--> ~~~ The HTML: ~~~ <div class='transparent-bg'> <p> I can has transparent background? <a href='#home-menu'>Go Home</a>. </p> </div> ~~~ First, I set the background to a semi-transparent PNG [1]. Then, I immediately override that setting with one for an RGBA background. Browsers which recognize RGBA as a background-color setting will override the previous background setting and apply only the RGBA background. IE7 supports PNGs (more or less) so we leave it alone here. IE6 does not, so we target it with conditional comments and use the proprietary gradient filter to allow just the background to be semi-transparent while leaving our text fully opaque. [2] Anyway, hope it helps. [1] data:uri images also work here, if the CSS for IE6 is extended to include IE7. [2] The caveat to using (any) filter is that Windows removes the ClearType settings on blocks that use filtering, so your text will look a little blockier in the filtered element, though not in the children if I remember correctly. -- <!-- ! Bill Brown <macnim...@gmail.com> ! Web Developologist, WebDevelopedia.com --> ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] 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/