Opacità della proprietà CSS3

Question

Come posso influenzare solo l'opacità di un elemento genitore e non i suoi figli

per esempio,

Voglio che l'opacità signup_backdrop sia impostata su 0,5 ma è l'elemento figlio signup_box non voglio avere alcuna opacità ma applicherà l'opacità impostata in signup_backdrop come ereditata.

Answer 1

Non puoi. Dovrai sovrapporre (posizionamento e z-index) i bambini rispetto al genitore, il che significa che non saranno più bambini. Quello, o usa PNG trasparenti per lo sfondo genitore e imposta l'opacità per tutti i fratelli del figlio completamente opaco.

* non testato, ma dovrebbe essere buono.

.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 hai rbga () per aggiungere un colore e opacità a un certo elemento.
Finora è stato implementato solo in Safari 3 e Firefox 3.
Per altri browser, usa i trucchi della risposta di Jonathan Sampson.