Is it possible to have solid text over a transparent background

solid text over transparent bg

[lilbear17]

Hi, I'm trying to solve a complicated problem and I'm wondering if anyone knows a trick. I have a page with an image that is overlayed with a solid colored table with text on it. The table data scrolls so I can't use any kind of fixed image. I figured out how to make the table bg color transparent to see the image behind it. But the problem is that the text becomes transparent too. Is there any way too make solid text over a transparent background color?

Thanks,
Mischa

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

[edited by: tedster at 9:14 pm (utc) on May 16, 2004]

[tedster]

If you place the image as a background-image for the table, then this CSS rule should allow the table data to scroll over a fixed background-image:

background-attachment:fixed;

Is that what you're aiming for?

[lilbear17]

not really... but I think I found the answer on another site. I used a div to place the scrolling table cell on top of the transparent table cell. Apparently this is the only way to do it because opacity is inherited.

[Bonusbana]

Apparently this is the only way to do it because opacity is inherited.

Yes you are right, opacity is inherited. But you could easily specify your <p> tags to be non-transparent like p {opacity: none; } or if you only want your p's inside a td to be non-transparent, something like td p {opacity: none;} should do it (Im talking about the style sheet here).

Be aware of that very few browsers support the opacity attribute, I think mozilla might be the only one at the moment.

I would advice you to use a .png image instead for better cross-browser compability, but there are still some browsers that doesnt support it (like the beloved IE5/win).

I hope this helps.

[lilbear17]

Thanks for the ideas.

I was under the impression that opacity is supported by ie5, mozilla and one other (safari?) but all by different call tags. Here's what I have...

.trans {
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
}

So here's a follow up question... Now that I got it to work with the div, should I worry about trying to make it work another way like with this p thing? And if it is better to still try and switch, how exactly do you write that p code in the style sheet. Does it go into the .trans code above?

Thanks!

PS I changed my profile domain to go to the staging site so people can see it and get a better idea of what I'm talking about.

[Bonusbana]

It all depends on how you have structured your html. Please post the relevant table and your current css.

I believe opacity is supported by mozilla, and filter is supported by ie/win. I actually dont know about safari, but I would be happy to test.

<added>
I just found out that even safari supports it. But there is a catch:
Safari v1.1 added -khtml-opacity, and safari v1.2 changed the name to just opacity. So if you want opacity to work in safari v1.1 and up, you should add opacity: 0.6; to your class.
</added>

[lilbear17]

I tried adding TD P {opacity: none;} to my style sheet and then putting some text into the table inside a p tag and it still was transparent at least in ie6 so I'm gonna stick with the div method.

I have the css I'm using in the last message of mine which covers I guess both safari 1.1 and 1.0? Thanks!

[edited by: tedster at 8:00 pm (utc) on May 17, 2004]

[Bonusbana]

Sorry, i didnt see you already added opacity: 0.6; to your original class. That should work for safari 1.1+

Try this code instead of using the extra div:

.trans {
background: red; /* testing only */
filter: alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6; /*safari 1.1 */
opacity: 0.6; /* safari 1.2 */
}

.trans p {
filter: none;
-moz-opacity:none;
-khtml-opacity: none;
opacity: none;
}

<table>
<tr>
<td class="trans">
<p>This text should be non-transparent on a transparent background.</p>
</td>
</tr>
</table>

[lilbear17]

thanks but nope, that didn't work either. Currently the table is setup like this <!-- <td bgcolor="black" class="trans"> then the content I'm testing is <p> this is a test </p> </td> --> is there a way to make the whole table cell bg a solid color outside of the td tag? Maybe that would stop the inheriting problem. Like I said though the div is working so don't worry about it too much ;)

Thanks!

[SuzyUK]

lilbear17 I found an older thread [webmasterworld.com] about this.

At the time I thought it would work like normal inheritance but it obviously doesn't.. and the posted solution (adding position relative to the text element) appears to only work in IE..

so maybe not all that helpful really :(

Suzy