flood a div inside another div and set opacity

Question

Say I have a html object tree as follows:

<div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div></div>
</div>

I want the css to flood the inner div inside of the outer one. However I want the text etc to appear intact. My idea is I can set a bg color and opacity to the inner div and not affect the text. How do I do this?

EDIT: just to emphasize on my point: I could very well set the opacity on the outer div, but the text inside will also fade. I don't want this to happen

Answer 1

You mean like this?

div>div {
    background-color: red;
    opacity: 0.5;
}

It uses the child selector, so only divs directly inside another div will be selected. Since divs are pretty much the most common HTML element, I'd suggest assigning at least one of them with a class name.

<div class="innerDiv"></div>

You can then style it with .innerDiv {} in your CSS stylesheet.

Answer 2

You wont be able to this, what you will need to do is the following:

<div class="maindiv">
    <p>Text 1</p>
    <p>Text 2</p>
</div>

<div class="floatingbkg"></div>

and apply the opacity to floatingbkg, then position them together, with floatingdiv behind maindiv.

I did create a jqueryplugin that did this, but I havent finished it, it simulated the popups from the iphone.

you will need to use relative positioning or such to have the divs overaly each other.

Answer 3

It is not clear to me what you mean by: "to flood" but to achieve this you can use css rules hyerarchy:

div {}

Affects all divs

div div{}

Affects all divs inside other divs

Answer 4

You could set the outer div to position: relative then the inner div to:

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

And set whatever you want on it. It should now cover everything inside that first div. If you want the text to appear on top of it just set:

div p {
   position: relative;
   z-index: 1;
}

div div {
   z-index: 0;
}

Answer 5

Use RGBa - see CSS-Tricks for examples. This changes the opacity of the background but doesn't alter the text transparancy.

Answer 6

It may work using transparent png image. http://www.templatespoint.com/blog/2010/10/set-opacity-to-div/