Searching for someone with a brain!
I am having web design problems. Bizzare ones. I am making a template wherein there are three main layers:
1.) The background image of the site.
2.) An opaque container on top of the background image.
3.) 4 Solid boxes of content, within the opaque container.
Now. The problem. The opacity of the second layer is set like this, currently:
#wrap {
border:5px solid #473624;
width:90%;
margin:0 auto;
padding:8px;
text-align:left;
background: #000000;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.4;
}
Ok.
Now the problem.
I don't want the third layer, the boxes of content, to inherit the opacity. I want them to be solid, surrounded by the opaque container, atop the background image. But they do inherit it, even though their background colours are set separately. I am assuming that they inherit the opacity simply because they are inside the DIV which creates the opaque container. I just can't make them stop. I have tried and tried everything that, to me, is obvious.
Please, someone, help me - all I need is some sort of opacity-stop property, and a sensible person to show me how to use it. I have searched the web for hours now, and I found one site which aparently had the answer... but they wanted a $10 subscription before they would show it to me.
Waaaaaaaaaaaaaaaaaaaa.
If anyone managed to follow all that, and if it made some sort of sense to them... congratulations. If they know the answer, I'll love them forever.