css alpha troubles

is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity?

i've been playing with this code:

style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100

and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table.

is there any way around this?

on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss.

IE/Win doesn't support the alpha chanel in PNG's (just binary transparency). Every other modern browser does.

ok, that answers one questions, but what about having the two different opacities for table background and text?

<div style="-moz-opacity: 0.5;">
<span style="-moz-opacity: 1;">opaque text on a translucent background in Gecko</span>
</div>

what about ie?

Same idea, but with filter crap instead of -moz-opacity. Or you can use both properties, and make it crossbrowser.

this is a testing page i'm trying to use this on:

http://www.option5.net/testing

the box on the right is what i want it to look like, however, this is achieved using two absolute-positioned div layers, one using an opacity of 100 for the text and the other underneath it for the background at an opacity of 70. the box on the left uses relative positioning, which is more what i need it for, as this page will be updated often, and it would be better to be able to put in a relative position, and all other div layers following it would move down the page accordingly.

i haven't tested this in netscape or any other browser, just ie.

In Opera 7.0 and in Netscape

Your left box works doesn't have the transparency effect
The right hand box doesn't have its grey background or transparency effect on the images.

this i know for i haven't checked in netscape nor opera nor anything but ie. i want it to work in ie first and then i'll get it to work in other browsers.

I've been having the same problems but i want the table to be semi-transparent and the content to be normal.


Try doing something like this - - -

...
<td style="filter: alpha(style=0, opacity=50)">testin'</td>
...


hope this works!

Internet Explorer DOES support png alpha if you are ready to go the long way around.... Read more about it here: URL

No. That's not supporting the alpha png channel. That's using native DirectX calls in a webpage through an ugly hack which is usually useless, as using translucent PNGs in <img/> is rarely what you want to do with them.

well..
i tried the alpha with css on my site URL

and it worx fine in windows explorer.. but in Safari and Explorer on Macintosh i cannot see the neat alpha trick..
i wonder why?

any other CSS-designers with Mac.. is there a workaround?



mac OS X Tiger

for safari use the RGBA (CSS2) specification:

Example:
background-color: rgba(153,255,153,0.7);