web-dev-qa-db-fra.com

Comment définir l'opacité dans le parent div et non affecter dans le div enfant?

Hé, je cherche dans google mais je ne peux pas trouver de réponse parfaite

Je veux l'opacité dans la division parent mais pas la division enfant

Exemple

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-fond dans Parent Div pas de couleur

csscss3parent-childopacity
70
Rohit Azad

Peut-être que c'est bien si vous définissez 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

43
sandeep

Je sais que c'est vieux, mais juste au cas où ça aiderait 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 utilisé pour la transparence.

77
PaulSatcom

Vous pouvez le faire avec des pseudo-éléments: ( démo sur dabblet.com ) enter image description here

votre balise: 

<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;
}
16
Vladimir Starkov

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

6
Rik

Tu ne peux pas. Css aujourd'hui ne permet tout simplement pas cela.

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

Si l'objet est un élément conteneur, l'effet est alors comme si le contenu de l'élément conteneur était fusionné avec l'arrière-plan actuel à l'aide d'un masque contenant la valeur de chaque pixel du masque.

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: elle peut apparaître logiquement et visuellement pour l'utilisateur en tant qu'enfant, mais l'élément n'a pas besoin d'être réellement un enfant dans l'environnement. votre code.

Une solution utilisant 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

5
Denys Séguret

J'ai eu le même problème et j'ai corrigé en définissant une image png transparente en tant qu'arrière-plan de la balise parent.

Il s'agit de l'image PNG 1px x 1px que j'ai créée avec 60% d'opacité sur fond noir !

1
Prakash Thangavelu

Vous ne pouvez pas faire cela, à moins de retirer l'enfant du parent et de le placer via le positionnement.

Le seul moyen que je connaisse et qui fonctionne réellement est de tiliser une image translucide (.png avec transparence) pour l’arrière-plan du parent. Le seul inconvénient est que vous ne pouvez pas contrôler l'opacité via CSS, à part ça, ça marche!

0
jackJoe