Page 1 of 1

Transparent TD Opacity

Posted: Thu Jun 03, 2010 9:32 am
by simonmlewis

Code: Select all

.opacity {
background-color: #000000;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
I am using this CSS to set a cell transparent with an image in the background.

But it is also setting the TEXT transparent too. I want to set the transparency so I can overlay it with Black or White text.

How do you do this?

Re: Transparent TD Opacity

Posted: Thu Jun 03, 2010 10:10 am
by pickle
You can't. Opacity is inherited.

About your only options are:
1) Put a couple <div>s in that cell, do some funky positioning so one div is completely behind the other, put the text in one, and set the background colour (and opacity) in the other.
2) Hope your users are using a CSS3 compatible browser, and use the rgba colour mode for the background color.

Re: Transparent TD Opacity

Posted: Thu Jun 03, 2010 10:52 am
by simonmlewis
Damn.
I have seen many sites that do it and it works.
But I fail to see how ocacity of a BACKGROUND can override the opacity of a FONT COLOR.

How do you get it behind it, if the CSS control the Cell.

Re: Transparent TD Opacity

Posted: Thu Jun 03, 2010 11:09 am
by pickle
You're not setting a background opacity. You're setting a background colour, then the opacity of the entire cell.

This is untested, but may work to get what you want:

Code: Select all

<td>
  <div style = "position:relative;">
    <div style = "position:absolute;width:100px;height:100px;top:0;left:0;background-color:#000;opacity:0.4;">
      &nbsp;
    </div>
    <div style = "position:absolute;width:100px;height:100px;top:0;left:0;">
      text goes here
    </div>
  </div>
</td>
The first <div> is because you need your two inner divs to be positioned absolutely, and the only way to stop them from flying around your page is to put them inside a relatively positioned element. Firefox doesn't listen to "position" styles on <td>, hence the <div>

Re: Transparent TD Opacity

Posted: Thu Jun 03, 2010 11:31 am
by kaszu
You can also use transparent PNG-24 image for background

Re: Transparent TD Opacity

Posted: Thu Jun 03, 2010 11:33 am
by pickle
kaszu wrote:You can also use transparent PNG-24 image for background
Just a caveat that transparent PNGs don't work in IE6/7 without some funky tweaking.

Re: Transparent TD Opacity

Posted: Thu Jun 03, 2010 11:38 am
by kaszu
In IE7 should work fine (but it was causing hasLayout?), for IE6 can use filter:

Code: Select all

* html .opacity {
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}

Re: Transparent TD Opacity

Posted: Thu Jun 03, 2010 11:44 am
by pickle
kaszu wrote:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
I'd consider that pretty funky ;)