inherit opacity

[Michiel]

Hi,

I'm working on a web site and came accros the following isue: I want to dispay a splash screen that contains of two div's. The first div contains the background and has an opacity of 80%. The second one contains the text and this text should have an opacity of 100%. The problem is that the second div (splashtxt) inherits the opacity of the first one (splash). How do I prevent this from happening?


<div name="splash" id="splash" style="position:absolute; top:40%; left:40%; filter:alpha(opacity=80); visibility:hidden"><img src="graphics2/splash.gif" alt="">
<div name="splashtxt" id="splashtxt" style="position:relative; top:-150; left:0; width:300; height:150; z-index:10;">txt</div>
</div>

[kansel]

1) don't nest the divs - this is guaranteed to work but you'll need to absolutely position both divs

2) "boost" the opacity of the inner div over 100%
filter:alpha(opacity=200); I have used this method with very little problem but I don't know how compatible it is

[liorean]

Well, as only iew is the only browser that supports filters anyway, it's compatibility is not an issue.

[kansel]

I meant compatibility between the different versions of IEW that support filters.. yeah, that's the ticket.

For Moz I used the same trick and it seems to work well: -moz-opacity: 2.00;

[liorean]

The alpha filter is the same in all versions, so there should be no difference. Not unless Microsoft chose to change the underlying DirectX functionality that is the core of the filters.