Comment définir l'opacité dans la div parent et ne pas l'affecter dans la div enfant ?

Question

Je cherche dans Google mais je ne trouve pas de réponse parfaite.

Je veux modifier l'opacité du DIV parent mais pas celle du DIV enfant.

Ejemplo

HTML

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

Css

.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}

Note : -- Je veux image d'arrière-plan en Parent Div pas de couleur

Answer 1

Je sais que c'est vieux, mais juste au cas où cela pourrait aider quelqu'un d'autre.

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div> 

Où rgba est : rouge, vert, bleu, et a est pour la transparence.

Answer 2

Il serait peut-être bon que vous définissiez votre image d'arrière-plan dans le :after pseudo classe. Écrivez comme ceci :

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

Vérifiez ceci violon

Answer 3

Vous peut le faire avec des pseudo-éléments : ( démo sur dabblet.com )

votre balisage :

<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

css :

.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.2;
    width: 400px;
    height: 200px;
    background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; 
}

.child{
    Color:black;
}

Answer 4

Comme mentionné par Tom, background-color: rgba(229,229,229, 0.85) peut faire l'affaire. Placez-la sur le style de l'élément parent et l'enfant ne sera pas affecté.

Answer 5

Vous ne pouvez pas. Le CSS d'aujourd'hui ne le permet tout simplement pas.

Le modèle de rendu logique est celui-ci :

Si l'objet est un élément de conteneur, l'effet est le même que si le contenu de l'élément de conteneur était mélangé à l'arrière-plan actuel à l'aide d'un masque où la valeur de chaque pixel du masque est .

Référence : transparence css

La solution consiste à utiliser une composition d'éléments différente, en utilisant généralement des positions fixes ou calculées pour ce qui est aujourd'hui défini comme un enfant : il peut apparaître logiquement et visuellement pour l'utilisateur comme un enfant, mais l'élément ne doit pas être réellement un enfant dans votre code.

Une solution utilisant le css : violon

.parent {
    width:500px;
    height:200px;    
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
    opacity: 0.2;
}
.child {
    position: fixed;
    top:0;
}

Une autre solution avec javascript : violon