opacidade CSS3 Propriedade

Question

Como i só pode afetar a opacidade de um elemento pai e não seus filhos

por exemplo,

eu quero signup_backdrop opacidade para ser fixado em 0,5, mas é elemento filho signup_box Eu não quero ter qualquer opacidade em tudo, mas ele vai aplicar o conjunto de opacidade em signup_backdrop como herdada.

Answer 1

Você não pode. Você vai precisar de super-impor (posicionamento, e z-index) os filhos sobre o pai, o que significa que não será mais crianças. Isso, ou usar transparente PNG do para o fundo pai, e definir a opacidade para todos os irmãos da criança totalmente opaco.

* não testado, mas deve ser bom.

.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

No CSS 3 você tem rbga () para adicionar uma cor e opacidade a um certo elemento.
É até agora implementado no Safari 3 e Firefox 3 só.
Para outros navegadores usar os truques de resposta de Jonathan Sampson.