CSS3 Property opacity

Question

How can i only impact the opacity of a parent element and not its children

eg,

i want signup_backdrop opacity to be set at 0.5 but it's child element signup_box i don't want to have any opacity at all but it will apply the opacity set in signup_backdrop as inherited.

Answer 1

You can't. You'll need to super-impose (positioning, and z-index) the children over the parent, meaning they will no longer be children. That, or use transparent png's for the parent background, and set opacity for any siblings of the fully-opaque child.

*untested, but should be good.

.signup_backdrop {
  position:fixed;
  top:0; left:0;
  background:#333333;
  width:100%; height:100%;
  z-index:10;
}

.signup_box {
  position:fixed;
  top:25%; left:25%;
  background:#ffffff;
  width:50%; height:50%;
  z-index:20;
}

<div class="signup_box">
  <p>Hello World</p>
</div>
<div class="signup_backdrop"></div>

Answer 2

In CSS 3 you have rbga() to add a color and opacity to a certain element.
It is so far implemented in Safari 3 and Firefox 3 only.
For other browsers use the tricks from Jonathan Sampson's answer.