Opacity problem

[edoplaza]

Hello,

 

I recently discovered the "opacity" property, which I find very exciting. One question here:

 

My html is very simple:

 

 

I want the container to be 50% opaque and the two other divs 100% opaque. I applied individual opacities for each div, like this:

 

#container {

filter: alpha(opacity=50) ;

opacity: .5 ;

background-color: #595959;

margin: 0px;

padding: 0px;

width: 960px;

height: 100%;

}

 

#leftcontent {

filter: alpha(opacity=100);

opacity: 1;

background-color: #CCCCCC;

height: 400px;

width: 500px;

margin-top: 20px;

margin-left: 20px;

margin-bottom: 20px;

float: left;

padding: 5px;

 

}

 

#rightcontent {

filter: alpha(opacity=100);

opacity: 1;

background-color: #CCCCCC;

height: 400px;

width: 500px;

margin-top: 20px;

margin-left: 20px;

margin-bottom: 20px;

float: right;

padding: 5px;

 

}

 

But it doesn't work. The two divs seem to inherit the 50% opacity property from the container. How do I assign independent opacities?

 

Thanks,

 

Eduardo

Edited January 11, 2009 by edoplaza

[lm]

however daunting it might sound, when you experiment with opacity, try to write inline styles for your "opacity" divs first( for example):

This black text has 50% opacity applied

and then, if possible move them into external stylesheet:

 

 

Also, try this source , may be you'd get some ideas for your fix.

[PicnicTutorials]

Here is your fix...

 

http://www.visibilityinherit.com/code/css-opacity.php

[Wickham]

Elements inherit the opacity from parents and you can't go back to 100% (no opacity).

 

However, as Eric's link describes, if the elements not having the same degree of opacity are positioned over the top with position: absolute (ie not nested within the elements with opacity) they are isolated and therefore unaffected.

[edoplaza]

Thanks a lot for your quick answers!