opacity propagation

开发者_如何学JAVAI've got a problem. I want a transparent background for the content div. But not all content in it. I can't get this working:

<div class="notTransparent"> <div class="transparent"></div> content </div>

Is there another work around??

CSS rgba

http://www.css3.info/preview/rgba/ http://www.css3.info/preview/opacity/

I think I have done this before (although it was ages ago). What you do is have a div with display: relative, then another div within that with display: absolute, left: 0px, top: 0px, width: 100% and height: 100%. Maybe apply z-index: -10 (to put this behind all other content). You then have the content within the top level (relative) div as normal. Give me a few minutes and I will work out the code for ya...

Ok done that - try the following:

.transparent {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.opaque {
    position: relative;
}
.content {
    position: absolute;
    left: 10px;
    top: 10px;
}

<div class="opaque">
    <div class="transparent">
        <img src="/Images/header1.png"/>
    </div>
    <div class="content">
        Hello world!
    </div>
</div>

Unfortunately I cannot find a way to place a relative element over the transparent div. If anyone finds a way then please paste the code here. By the way there is actually no need to specify any z-indexes.

I also ran into inheritance problems with transparency a while back, this did the trick for me: http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack (demo).