Table Background Opacity with Text
Hello All,
I have a table that I want to have a colored background. I want the backround to have some opacity to it. I will have text within the cells.
The problem I am having is that I am able to control the opacity of the background but that also makes the cell text fade too.
Is there a way to keep the text from being affected by the opacity setting?
Test Text
Thanks
NYColt
Abhishek Reddy posted this at 15:28 — 19th January 2004.
He has: 3,348 posts
Joined: Jul 2001
Okay, I'm not sure of this. I try to avoid opacity controls at the moment because they're non-standard. Anyway, try something like this:
<!-- In your style area: -->
table.translucent {
-moz-opacity:40%;
filter: alpha(opacity=40);
}
span.opaque {
-moz-opacity:100%;
filter: alpha(opacity=100);
}
<!-- The HTML: -->
<table width="400" height="300" border="0" class="translucent">
<tr>
<td><span class="opaque"><b>Test Text</b></span></td>
</tr>
</table>
In the hope that the "translucent" class sets opacity for all elements in the table, but the "opaque" class overrides it for your text. Does it work?
JeevesBond posted this at 15:56 — 19th January 2004.
He has: 3,956 posts
Joined: Jun 2002
I tried that myself earlier (we even chose the same class names - spooky
) and it didn't work in IE6... I don't know anyone who uses these properties, they are - as Abishek correctly stated - non-standard 
There are better ways of getting the effect of variable opacity - if you need help with these, let us know
a Padded Cell our articles site!
Abhishek Reddy posted this at 04:24 — 20th January 2004.
He has: 3,348 posts
Joined: Jul 2001
Great minds fail alike.
What other methods do you know to achieve similar effects?
JeevesBond posted this at 10:26 — 20th January 2004.
He has: 3,956 posts
Joined: Jun 2002
Do it manually
e.g. If you are putting a partially transparent over an image, colour the image in photoshop (or whatever graphics package you're using). It's about the only standard way I know of.
It probably sounded like I knew some clever CSS trick no-one else is aware of...Sorry to disappoint!
a Padded Cell our articles site!
Abhishek Reddy posted this at 11:26 — 20th January 2004.
He has: 3,348 posts
Joined: Jul 2001
heh, I didn't expect anything magical... (okay, maybe a little).
CSS3 supports variable transparency as a standard, I think. Guess we'll just have to wait until it's recommended.
Abhishek Reddy posted this at 11:29 — 20th January 2004.
He has: 3,348 posts
Joined: Jul 2001
Actually...
Jeeves, you disappoint me! Did you even bother searching Google?
heh
http://www.domedia.org/oveklykken/css-transparency.php
JeevesBond posted this at 11:34 — 20th January 2004.
He has: 3,956 posts
Joined: Jun 2002
Yeah, ok... I'm lazy!
I still wouldn't rely on a method which isn't supported by all viewers - has anyone tested whether this works in Opera etc. (I'm at work at the moment so can't).
Good detective work though
a Padded Cell our articles site!
NYColt posted this at 13:08 — 20th January 2004.
They have: 42 posts
Joined: Dec 2002
GREAT Link! THAT is EXACTLY what I was looking for!
Thanks
NYColt
Abhishek Reddy posted this at 14:10 — 20th January 2004.
He has: 3,348 posts
Joined: Jul 2001
lol, it was the first result on Google for "css transparency" or similar.
NYColt, Jeeves is right. Keep in mind that it's still non-standard. You should at least consider whether it's suited to your audience -- check what agents they use to visit your site, etc. I would recommend following Jeeves's advice to go with images to achieve whatever effect as well.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.