Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I got the following layout:

body -> wrapper -> container

Body 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.

share|improve this question
    
HTML/CSS questions are a better fit on Doctype –  John Conde Jan 27 '11 at 16:11
    
There are so many different SO sites these days. Hard to know which to post in. –  jgauffin Jan 27 '11 at 19:32
add comment

closed as off topic by John Conde Jan 27 '11 at 16:10

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 2 down vote accepted

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.

share|improve this answer
1  
Using position: absolute; and z-index then aligning it properly inside of whatever parent element #container will be in will give you the desired effects. Also, great answer Lèse! –  Christopher Jan 27 '11 at 9:20
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.