Opacità della proprietà CSS3
Domanda
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.
Soluzione
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>
Altri suggerimenti
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.