CSS3 propiedad opacidad

Question

¿Cómo puedo afectar solo la opacidad de un elemento padre y no a sus hijos?

por ejemplo,

quiero que la opacidad de signup_backdrop se establezca en 0.5, pero es el elemento secundario signup_box. No quiero tener ninguna opacidad, pero aplicará la opacidad establecida en signup_backdrop como heredada.

Answer 1

No puedes. Deberá superponer (posicionar e z-index) a los hijos sobre el padre, lo que significa que ya no serán hijos. Eso, o use PNG transparentes para el fondo principal, y establezca la opacidad para los hermanos del niño totalmente opaco.

* no probado, pero debería ser bueno.

.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

En CSS 3 tienes rbga () para agregar un color y opacidad a un cierto elemento.
Hasta ahora está implementado solo en Safari 3 y Firefox 3.
Para otros navegadores usa los trucos de la respuesta de Jonathan Sampson.