Comment définir l’opacité dans le div parent et ne pas affecter dans div enfant?

Hé je cherche dans google mais je ne peux pas répondre à une réponse parfaite

Je veux opacité dans DIV parent mais pas dans DIV DIV

Exemple

HTML

Hello I am child

Css

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

Note: – Je veux une image d’ arrière-plan dans la Parent Div Pas la couleur

Peut-être que c’est bien si vous définissez votre image de fond dans la pseudo-classe :after . Ecrivez 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 ce violon

Je sais que c’est vieux, mais juste au cas où cela aiderait quelqu’un d’autre.

 
child

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

Vous pouvez le faire avec des pseudo-éléments: ( démo sur dabblet.com ) entrer la description de l'image ici

votre balisage:

 
Hello I am child

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; } 

Comme mentionné par Tom, la 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é.

Vous ne pouvez pas Css aujourd’hui ne le permet tout simplement pas.

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

Si l’object est un élément conteneur, l’effet est comme si le contenu de l’élément conteneur était mélangé à l’arrière-plan actuel à l’aide d’un masque où se trouve la valeur de chaque pixel du masque.

Référence: css transparence

La solution consiste à utiliser une composition d’élément 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 en tant qu’enfant, mais l’élément n’a pas besoin d’être vraiment un enfant. 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: fiddle

J’ai eu le même problème et j’ai corrigé en définissant une image png transparente comme arrière-plan pour la balise parente.

Voici l’image PNG 1px x 1px que j’ai créée avec 60% d’opacité sur fond noir !

Vous ne pouvez pas le faire, sauf si vous retirez l’enfant du parent et le placez par positionnement.

La seule façon que je connaisse et que cela fonctionne est d’ utiliser une image translucide (.png avec transparence) pour l’arrière-plan du parent. Le seul désavantage est que vous ne pouvez pas contrôler l’opacité via CSS, sauf que cela fonctionne!