PDA

View Full Version : Dynamic HTML - Transparency question



FSME
Jun 29th, 2002, 03:40 PM
Hi,

I wonder if it is possible to make a div/span item partially transparent (i.e. you see the item's own color plus the underlying site's).

So far I've found the object.allowTransparency=true for full BG-transparency and the object.style.backgroundColor='red' to set the BG-Color. I couldn't really find something on MSDN but I don't really trust their search algorithm :D
So: is it possible at all? If yes: how?

Thanks guys!

jkd
Jun 29th, 2002, 05:17 PM
For IE, you can use:

filter: Alpha(opacity=0.5);
OR
filter: Opacity(alpha=0.5);

(I can never remember which). That sets it to 50% opacity.

CSS3 supplies a property called "opacity". When Gecko (NS6, NS7, Mozilla, etc), don't fully support a CSS property to specs, the append a -moz- in front of it. Because of Gecko's partial supoort for opacity, you can also use:

-moz-opacity: 0.5;

to achieve the same thing in NS6+. :)

Quiet Storm
Jun 29th, 2002, 05:46 PM
There are a few working examples on my site if you'd like to check them out.

http://angelfire.com/mo2/cbch21/index2.html
(IE only)

FSME
Jun 29th, 2002, 07:27 PM
@jkd: thanks, that helped a bit. But now only my table's contents are faded to the BG-Color of the table and not the whole table to the BG-Color of the underlying site. Some more details here on my part: I'm trying to make a dynamic table (with one picture and one sentence) sort of "shine-through". This is the code so far:

<table border=2 width="60%" bordercolor="#00CC00" style="border-collapse: collapse; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10, Style=0)" cellpadding="0" cellspacing="0">

@Quiet Storm: I tried to access your website but it didn't load (well, the first part did, the crome-thing window didn't)

Quiet Storm
Jun 29th, 2002, 08:27 PM
Originally posted by FSME

<table border=2 width="60%" bordercolor="#00CC00"
style="border-collapse: collapse;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10,
Style=0)" cellpadding="0" cellspacing="0">

@Quiet Storm: I tried to access your website but it didn't load (well, the first part did, the crome-thing window didn't)

What is all this business?:
"filter:progid:DXImageTransform.Microsoft.Alpha"

This is all you should need:


<table border=2 width="60%" bordercolor="#00CC00"
style="border-collapse: collapse; filter:Alpha(Opacity=10)" cellpadding="0" cellspacing="0">



As for background opacity vs text, you'll need two tables positioned one on top of the other. One with the BG and opacity set at (10), the second table containing text with opacity set at (100).

http://www.angelfire.com/mo2/cbch21/2/TEST/2Table.Opacity.html

premshree
Jun 30th, 2002, 08:09 PM
"filter:progid:DXImageTransform.Microsoft.Alpha" : This is just a standard that Microsoft wants developers to use. It is a Microsoft CSS extension and is not required. You can simply use
filter:Aplpha()

FSME
Jul 2nd, 2002, 09:21 AM
Thanks everybody. I'm gonna try it next week-end (not home right now), so I'll let you know about my progress by then.

FSME
Jul 6th, 2002, 04:27 PM
Allrighty, it's working now, thanks to the tips in http://www.codingforums.com/showthread.php?s=&threadid=1420. And yes, filter.Alpha(Opacity=50) is enough, you don't need that other stuff but it works with both...