Question

I have the following DIV structure:

<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>

I want to apply one half opaque background into the parent DIV, and one fully visible background to the child DIVs. However, it seems that the child will take over the parent, so, I have now no idea how to come over with this.

EDIT: Some more clarification.

I have a jQuery draggable “window” made of DIVs. Inside it, I have a progress bar with

relative position like:
position: relative;
left: 16px;
top: 16px;

This way the progress bar will be at 16-16 of the window (not the screen) and the progress bar moves correctly along with the window.

However, the progress bar has texture on the top. Take a look at this example:

<div style="background: url('texture.png'), url('empty.png'); width: 256px;">
<div style="background: url('progress.png'); width: 33%;"></div>
</div>

There’s an opaque texture applied to the whole progress bar element, for example, if the percentage of this progress bar is 33%, then it looks like xxx—— where x denotes the flowing green bar and – is empty. The texture must be applied to both x and -, but currently the image of x takes place over the texture.

I can’t really use Z-index and/or position absolute to position the child elem on the top, because of the relative positioned approach.

Answer 1

I don’t know whether I understoood your question correctly, but aren’t you looking for CSS3 RGBA colours?

p { color: rgba(0,0,255,0.5) }        /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

Reference: 4.2.2 RGBA color values