CSS3 opacité de la propriété

Comment puis-je avoir un impact que l'opacité d'un élément parent et non ses enfantsCSS3 opacité de la propriété

par exemple,

je veux signup_backdrop opacité à être fixé à 0,5 mais il est un élément enfant signup_box je ne veux pas pour avoir une opacité du tout mais il appliquera l'opacité définie dans signup_backdrop comme héritée.

Source

2009-07-30 Neil Ashley Hickman

Vous ne pouvez pas. Vous devrez superposer (positionnement et z-index) les enfants sur le parent, ce qui signifie qu'ils ne seront plus des enfants. Cela, ou utilisez des fichiers PNG transparents pour l'arrière-plan parent et définissez l'opacité pour 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>

Source

2009-07-30 11:18:32 Sampson

Ce n'est que la moitié droite. Voir ma réponse pour plus de détails. –

j'ai essayé le ci-dessus Jonathan, il fonctionne parfaitement merci ... maintenant nous avons juste besoin de protester jusqu'à ce que IE décide qu'il va incorporer la propriété lol –

Incororate quelle propriété? – Sampson

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

Source

2009-07-30 11:45:20

Et cela permet à un enfant d'avoir une opacité différente de celle de son parent? – Sampson

Oui. Je l'ai testé. –

CSS3 opacité de la propriété

Répondre

Questions connexes