web-dev-qa-db-fra.com

Opacité CSS - couleur d'arrière-plan

J'essaie d'obtenir une opacité d'un div noir à 0,5, mais le contenu de la div (balise h3) à opactiy 1. Donc, le texte blanc est toujours blanc, avec son opacité non modifiée/intacte.

<div style="background-color:red;">
<div style="width:470px;color:white;margin-top:170px;">
<div style="background-color:black;opacity:0.5;">
<h3 style="color:white;opacity:1;">Heading </h3><p>tagline here</p>
</div>
</div>
</div>

JSFiddle

Toutes suggestions très appréciées.

css3opacity
7
Mark

Vous pouvez utiliser rgba à la place si vous ne craignez pas de prendre en charge les anciennes versions d'IE:

background-color: rgba(0, 0, 0, 0.5);
23
Matt Cain

Utilisez rgba - [~ # ~] démo [~ # ~] 

background-color: rgba(0, 0, 0, .5)

( et n'utilisez pas de CSS en ligne)

5
Zoltan Toth

L'opacité s'applique aux éléments enfants. Comme @MattCain le suggère, utilisez RGBA sur la couleur d'arrière-plan DIV pour contourner ce problème.

<div style="background-color:red;">
<div style="width:470px;color:white;margin-top:170px;">
<div style="background-color: rgba(0, 0, 0, 0.5);">
<h3 style="color:white;opacity:1;">Heading </h3><p>tagline here</p>
</div>
</div>
</div>
0
tim.baker