Transparent TD Opacity

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Transparent TD Opacity

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Transparent TD Opacity

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Transparent TD Opacity

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Transparent TD Opacity

Post 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>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Transparent TD Opacity

Post by kaszu »

You can also use transparent PNG-24 image for background
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Transparent TD Opacity

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Transparent TD Opacity

Post 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');
}
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Transparent TD Opacity

Post by pickle »

kaszu wrote:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
I'd consider that pretty funky ;)
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply