February 23rd, 2003, 12:48 AM
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.
February 23rd, 2003, 09:57 AM
IE/Win doesn't support the alpha chanel in PNG's (just binary transparency). Every other modern browser does.
February 23rd, 2003, 10:14 AM
ok, that answers one questions, but what about having the two different opacities for table background and text?
February 23rd, 2003, 02:09 PM
<div style="-moz-opacity: 0.5;">
<span style="-moz-opacity: 1;">opaque text on a translucent background in Gecko</span>
February 23rd, 2003, 02:17 PM
February 23rd, 2003, 03:01 PM
Same idea, but with filter crap instead of -moz-opacity. Or you can use both properties, and make it crossbrowser.
February 23rd, 2003, 07:05 PM
this is a testing page i'm trying to use this on:
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.
February 24th, 2003, 01:57 PM
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.
February 24th, 2003, 06:00 PM
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!
July 10th, 2003, 07:47 AM
July 10th, 2003, 11:16 AM
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.
August 26th, 2003, 04:07 AM
alpha in Safari + Explorer (MAC)
i tried the alpha with css on my site www.ffiffl.com
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
April 6th, 2004, 04:09 AM
Alpha in Safari
for safari use the RGBA (CSS2) specification: