Opacité des propriétés CSS3

Question

Comment puis-je uniquement influer sur l'opacité d'un élément parent et non de ses enfants

par exemple,

Je veux que l'opacité signup_backdrop soit définie sur 0,5, mais c'est l'élément enfant signup_box. Je ne souhaite pas avoir d'opacité du tout, mais l'application de l'opacité définie dans signup_backdrop sera héritée.

Answer 1

Vous ne pouvez pas. Vous devrez super-imposer (positionnement et index z) les enfants sur le parent, ce qui signifie qu'ils ne seront plus des enfants. Ou bien, utilisez des PNG transparents pour l’arrière-plan parent et définissez l’opacité de tous les frères et sœurs de l’enfant totalement opaque.

* non testé, mais devrait être bon.

.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

Dans CSS 3, vous devez rbga () ajouter une couleur et une opacité à une certain élément.
Il est jusqu'à présent implémenté dans Safari 3 et Firefox 3. uniquement.
Pour les autres navigateurs, utilisez les astuces de la réponse de Jonathan Sampson.