: Turn off opacity I got the following layout: body -> wrapper -> container Body has a background image, wrapper got this css: #wrapper { padding: 40px; width: 768px; background:
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.
More posts by @Chiappetta492
1 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.