CSS3 Property Opazität
Frage
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.
Lösung
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>
Andere Tipps
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.