set different opacity for nested elements

Question

I want to make a win7 file exporlor-like effect: the title bar have a opacity less than 1, while the content have no opacity.

Then I tried to combine two elements together to make it:

<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;opacity:1;height:100%;"></div>
</div>

I want to make the div#outer have a opacity of 0.8,then make the div#inner have no opacity(with opacity=1).

However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.

Any ideas?

Answer 1

However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.

Correct.

---

But if what you want is just a translucent background, setting RGBA color as background-color would meet the needs. Like this:

<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;height:100%;"></div>
</div>

---

For more infomation, read MDN documents here: https://developer.mozilla.org/en-US/docs/CSS/color

---

For IE 7 support, I believe this(using generated background image files) is an acceptable solution.