I got the following layout:body -> wrapper -> containerBody has a background image,wrapper got this css:#wrapper{    padding: 40px;    width: 768px;    background: #ffffff;    opacity: .2;    ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);    filter: alpha(opacity=20);    -moz-border-radius: 11px;    -webkit-border-radius: 11px;    border-radius: 11px;    behavior: url(border-radius.htc);    margin:150px auto 0;    position:relative;    width:680px;    z-index:2;}and container:#container{    -moz-border-radius: 11px;    -webkit-border-radius: 11px;    border-radius: 11px;    behavior: url(border-radius.htc);    height:360px;    margin:150px auto 0;    position:relative;    width:680px;}My problem is that #container get the same opacity as #wrapper. I want to to have full opacity (i.e. be displayed as normal). I tried to set all opacity options to 100 (1), but that didn't help.
Turn off opacity
css
AFAIK, that can't be done. Nested elements are rendered together as a single object. So if the parent element has partial opacity, then the child elements also have partial opacity. You can decrease the opacity of child elements further, but you can't make it more than the opacity of the parent they reside within.What you can do, however, is to not nest the elements and instead just overlay #container over #wrapper. This takes it out of the natural flow of elements, but it's the only way you can create the illusion of a child element having greater opacity than its parent.