Transparent Table Color with Solid Text

[tyrant1969]

I have the following styles defined on my page:

<STYLE TYPE='text/css'>
 .transparent2 {filter:Alpha(Opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity: 0.5;}
 .remove_filter2 {position : relative; filter:Alpha(Opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity: 1.00;}
</style>

They're used to make the background color of a table transparent, but it also turns the text transparent so I use the remove_filter2 it allows the text to be solid.

Here's the code example...

<table align="center" border="1" class="transparent2" bgcolor="blue">
  <tr>
    <td><div class="remove_filter2">Solid Text</div></td>
  </tr>
</table>

This works great in IE, but works partially in FireFox - the text does not return to solidity.

Any ideas?

 

[BillyRayPreachersSon]

Yes - give up now. I'm surprised that this works for you in IE... think about it logically, for a minute:

Any element that has a transparency will always pass that on to its children and descendant elements. No matter what opacity level they have on them, they will never be truly "solid" unless the parent has no opacity.

Therefore, you cannot give a parent 50% opacity, and a child 100% - the child node would be 100% of 50% - i.e. still 50% opaque.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

I've never played with opacity, so I don't know if what Dan says is correct (it usually is, though). It seems like a silly way to implement it, but it's not unknown for W3C to come up with silly ideas. Being CSS3, none of it's set in stone.

How to work around it? Try creating a .png with 50% opacity to use as a background image. Most browsers will handle that, except for IE. You can either stick with your existing approach for IE users, or give them a .gif instead that has solid and transparent pixels in a chequerboard pattern:

.transparent2 { background: url(transparent.png); }
* html .transparent2 { background: url(transparent.gif); }

Alternatively, you could fake the opacity as in the "Complex Spiral" demo:

http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

. You'll need to google around a bit to find ways of getting it to work in IE, though.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

Therefore, you cannot give a parent 50% opacity, and a child 100% - the child node would be 100% of 50% - i.e. still 50% opaque.

Hmm - I just realised that this was misleading... You can give a parent 50% opacity and a child 100%... it's just that there is no point in doing so.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

I think there is (or could be) every point in doing so. The OP's example being a case in point.

I've just checked the CSS3 spec at

http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency

. If Firefox is working in the way you suggest - treating [tt]-moz-opacity: 1;[/tt] as "100% of the parent's opacity", then it's a bug (assuming they're trying to follow the current CSS3 draft, that is).

Opacity values should be in "the range 0.0 (fully transparent) to 1.0 (fully opaque)", the parent's value doesn't come into it. It's like the percentages in [tt]rgb(100%,50%,0)[/tt] - an absolute, not relative value.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

As I understand it, if a parent element has an opacity of 50%, then any of its children will, by default (i.e. at 100% opacity), be 50% opaque.

So to further specify 100% opacity on one of those child elements would make no difference - they would still be 100% of the initial 50%.

As you say - it is an absolute value... but based on the initial opacity of the element, which cannot be overriden, AFAIK.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Hmm, I have played with opacity within the suckerfish dropdowns.

From memory, I wanted the drop down background to be semi transparent.
This had the effect of giving the text within it the same transparency.

By setting the <ul> to 50% and the <li>s to 100% I got around the problem.

I'm pretty sure that's how it worked and it worked in FF and IE and also, I believe on the Mac versions.

The %age opacity is just a value based on 0-100. 0 being invisible and 100 being solid.

If you don't specify a value then the value is inherited from the parent. However, if you do, then that value is applied.

I might be wrong, but I managed to do what I wanted, I recall that much. Didn't use it in the final job though.
I'll have another play when I get 10 mins.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[Foamcow]

I stand corrected, Dan is right.

The %age opacity is a %age of the parent element's opacity.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[ChrisHunt]

As I understand it, if a parent element has an opacity of 50%, then any of its children will, by default (i.e. at 100% opacity), be 50% opaque.

True, but not because the children have a value that's 100% of their parent. It's because they inherit the value from their parent (by default).

If you explicitly set a child element to have some other opacity value, that's the value it should have regardless of the parent value. At least that's how I read the CSS3 spec.

Now of course we're not talking about the CSS3 property [tt]opacity[/tt], but the browser-specific (and undocumented) property [tt]-moz-opacity[/tt], which can behave any way the Mozilla guys want it to. We can't really call it a bug if we don't know what it's supposed to do (at least when Microsoft introduce some manky proprietry property they tend to fully document it!).

But if the spec stays the same and they take the [tt]-moz-[/tt] off the front, it'll be a bug.

What'd be really useful is for the W3C guys to add a [tt]background-opacity[/tt] property. Fully opaque text on a semi-transparent background seems to me to be a pretty common requirement. It'd be nice to be able to specify it without extra HTML markup.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

What'd be really useful is for the W3C guys to add a background-opacity property

Now that is a good idea - to be able to differentiate between foreground and background opacities, just as you can differentiate between foreground and background colours. I wonder if it will happen for v3?

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]