Comment mettre l'opacité dans la divinité parent et ne pas affecter dans la divinité enfant? [dupliquer]

cette question a déjà une réponse ici:

Hey je cherche dans google mais je ne peux pas amende n'importe quelle réponse parfaite

Je veux opacité dans DIV parent mais pas Enfant DIV

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

Remarque: -- je veux background-image dans Parent Div pas de Couleur

65
demandé sur Community 2012-06-04 13:25:24

7 réponses

peut être qu'il est bon si vous définissez votre background-image dans la classe de pseudo :after . É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;
}

Cochez cette violon

40
répondu sandeep 2016-01-27 07:42:57

je sais que c'est vieux, mais juste au cas où il aidera 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.

72
répondu PaulSatcom 2013-01-25 16:23:00

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

votre majoration: 

<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;
}
15
répondu Vladimir Starkov 2012-06-04 09:55:58

comme L'a mentionné Tom, background-color: rgba(229,229,229, 0.85) peut faire l'affaire. Place que sur le style de l'élément parent et l'enfant ne sera pas affectée.

6
répondu Rik 2014-09-05 18:55:16

vous ne pouvez pas. La Css aujourd'hui ne le permet tout simplement pas.

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

si l'objet est un élément conteneur, alors l'effet est comme si le contenu de l'élément conteneur était mélangé avec le fond courant en utilisant un masque où la valeur de chaque pixel du masque est .

la Référence : css transparence

la solution est d'utiliser une composition d'élément différente, généralement en utilisant 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 n'a pas besoin d'être vraiment un enfant dans votre code.

Une solution à l'aide de 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

4
répondu Denys Séguret 2016-01-27 07:05:13

j'ai eu le même problème et j'ai corrigé en positionnant l'image png transparente comme arrière-plan pour l'étiquette parent.

C'est L'Image 1px X 1px PNG que j'ai créée avec 60% D'opacité de fond noir !

1
répondu Prakash Thangavelu 2014-02-06 09:33:49

vous ne pouvez pas faire cela, à moins que vous ne retiriez l'enfant du parent et ne le positionniez.

la seule façon que je connaisse et cela fonctionne réellement, est de utiliser 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 que cela fonctionne!

0
répondu jackJoe 2012-06-04 09:43:30