CSS3 Property Opazität

Question

Wie kann ich nur die Opazität eines übergeordneten Elements auswirken und nicht seine Kinder

Beispiel

ich will signup_backdrop Opazität auf 0,5 eingestellt werden, aber es ist untergeordnetes Element signup_box ich will keine Opazität überhaupt haben, aber es wird die Opazität in signup_backdrop gesetzt gilt als vererbt.

Answer 1

Sie können nicht. Sie werden müssen super verhängen (Positionierung und z-Index), um die Kinder über die Eltern, das heißt, sie nicht mehr Kinder sein wird. Das, oder verwenden transparente PNG für den übergeordneten Hintergrund und setzen Opazität für alle Geschwister des vollständig undurchsichtig Kind.

* nicht getestet, aber sollte gut sein.

.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 Sie haben RGBA () die Farbe und Transparenz zu einem hinzufügen bestimmte Element.
Es ist so weit in Safari 3 und Firefox 3 nur implementiert.
Für andere Browser verwenden, um die Tricks von Jonathan Sampson Antwort.