Dynamic HTML - Transparency question

[FSME]

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
So: is it possible at all? If yes: how?

Thanks guys!

[jkd]

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]

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]

@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]

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/...e.Opacity.html

[premshree]

"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]

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]

Allrighty, it's working now, thanks to the tips in http://www.codingforums.com/showthre...&threadid=1420. And yes, filter.Alpha(Opacity=50) is enough, you don't need that other stuff but it works with both...