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 <[email protected]>
! Web Developologist, WebDevelopedia.com
-->
______________________________________________________________________
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/
