Je ne veux pas hériter l'opacité enfant du parent en CSS

Je ne veux pas hériter l'opacité enfant du parent en CSS.

J'ai un div qui est le parent, et j'ai un autre div à l'intérieur du premier div qui est l'enfant.

Je veux définir la propriété d'opacité dans la div parent, mais je ne veux pas que la div enfant hérite de la propriété d'opacity.

Comment puis je faire ça?

Au lieu d'utiliser l'opacité, définissez une couleur d'arrière-plan avec rgba, où «a» est le niveau de transparence.

Donc au lieu de:

background-color: rgb(0,0,255); opacity: 0.5;

utilisation

background-color: rgba(0,0,255,0.5);

L'opacité n'est pas réellement héritée en CSS. C'est une transformation de groupe post-rendu. En d'autres termes, si un <div>opacité est définie, vous rendez le div et tous ses enfants dans un tampon temporaire, puis composez l'ensemble de ce tampon dans la page avec le paramètre d'opacité donné.

Ce que vous voulez faire exactement ici dépend du rendu exact que vous recherchez, ce qui n'est pas clair à la question.

Comme d'autres l'ont mentionné dans ce fil et dans d'autres fils similaires, la meilleure façon d'éviter ce problème est d'utiliser RGBA / HSLA ou bien d'utiliser un PNG transparent.

Mais, si vous voulez une solution ridicule, similaire à celle liée dans une autre réponse de ce fil (qui est également mon site Web), voici un tout nouveau script que j'ai écrit qui résout ce problème automatiquement, appelé thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Fondamentalement, il utilise JavaScript pour supprimer tous les enfants de la div parent, puis repositionner les éléments enfants à l'endroit où ils devraient être sans être réellement les enfants de cet élément.

Pour moi, cela devrait être un dernier recours, mais j'ai pensé que ce serait amusant d'écrire quelque chose qui a fait ça, si quelqu'un veut le faire.

Une petite astuce si votre parent est transparent et que vous souhaitez que votre enfant soit le même, mais défini exclusivement (par exemple pour écraser les styles d'agent utilisateur d'une liste déroulante sélectionnée):

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}

L'opacité de l'élément enfant est héritée de l'élément parent.

Mais nous pouvons utiliser la propriété css position pour accomplir notre réussite.

Le div de conteneur de texte peut être placé en dehors du div parent mais avec un positionnement absolu projetant l'effet souhaité.

Exigence idéale ------------------ >>>>>>>>>>>>>

HTML

            <div class="container">       
              <div class="bar">
                  <div class="text">The text opacity is inherited   from the parent div    </div>
              </div>
            </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;

               }

Production:--

le texte n'est pas visible car il hérite de l'opacité de la div parent.

Solution ------------------- >>>>>>

HTML

       <div class="container">  
         <div class="text">Opacity is not inherited from parent div "bar"</div>
         <div class="bar"></div>
       </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;
                z-index:3;
                position:absolute;
               top:0;
               left:0;  
               }

Production :

le texte est visible avec la même couleur que le fond car le div n'est pas dans le div transparent

La question n'a pas défini si l'arrière-plan est une couleur ou une image mais comme @Blowski a déjà répondu pour les arrière-plans colorés, il y a un hack pour les images ci-dessous:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

De cette façon, vous pouvez manipuler la couleur de votre opacité et même ajouter de jolis effets de dégradé.

.wrapper {
  width: 630px;
  height: 420px;
  display: table;
  background: linear-gradient(
    rgba(0,0,0,.8), 
    rgba(0,0,0,.8)), 
    url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
 }

h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  }

<div class="wrapper">
<h1>Question 5770341</h1>
</div>

Il semble que les display: blockéléments n'héritent pas de l'opacité des display: inlineparents.

Exemple de Codepen

Peut-être parce que c'est un balisage invalide et que le navigateur les sépare secrètement? Parce que la source ne montre pas que cela se produit. Suis-je en train de manquer quelque chose?

Les réponses ci-dessus semblent compliquées pour moi, j'ai donc écrit ceci:

#kb-mask-overlay { 
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%; 
    z-index: 10000;
    top: 0; 
    left: 0; 
    position: fixed;
    content: "";
}

#kb-mask-overlay > .pop-up {
    width: 800px;
    height: 150px;
    background-color: dimgray;
    margin-top: 30px; 
    margin-left: 30px;
}

span {
  color: white;
}

<div id="kb-mask-overlay">
  <div class="pop-up">
    <span>Content of no opacity children</span>
  </div>
</div>
<div>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.

Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu. 
 </p>
</div>

kb-mask-overlayc'est votre parent (d'opacité), pop-upce sont vos enfants (pas d'opacité). Tout en dessous, c'est le reste de votre site.

Il n'y a pas d'approche universelle, mais une chose que j'ai trouvée particulièrement utile est de définir l'opacité pour les enfants directs d'une div, à l'exception de celle que vous souhaitez garder pleinement visible. Dans du code:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>

et css:

div.parent > div:not(.child1){
    opacity: 0.5;
}

Dans le cas où vous avez des couleurs / images d'arrière-plan sur le parent, vous fixez l'opacité des couleurs avec rgba et l'image d'arrière-plan en appliquant des filtres alpha

Si vous devez utiliser une image comme arrière-plan transparent, vous pourrez peut-être la contourner à l'aide d'un pseudo-élément:

html

<div class="wrap"> 
   <p>I have 100% opacity</p>  
</div>

css

.wrap, .wrap > * {
  position: relative;
}
.wrap:before {
  content: " ";
  opacity: 0.2;
  background: url("http://placehold.it/100x100/FF0000") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}

Ma réponse ne concerne pas la disposition parent-enfant statique, mais les animations.

Je faisais une démo svg aujourd'hui, et j'avais besoin que svg soit à l'intérieur de div (parce que svg est créé avec la largeur et la hauteur de div du parent, pour animer le chemin), et ce div parent devait être invisible pendant l'animation du chemin svg (et ensuite ce div était censé le faire animate opacity from 0 to 1, c'est la partie la plus importante). Et parce que le parent div avec opacity: 0masquait mon svg, je suis tombé sur ce hack avec visibilityoption (l'enfant avec visibility: visiblepeut être vu à l'intérieur du parent avec visibility: hidden):

.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}

Et puis, dans js, vous supprimez la .invisibleclasse avec la fonction timeout, ajoutez la .opacity-zeroclasse, déclenchez la disposition avec quelque chose comme whatever.style.top;et supprimez la .opacity-zeroclasse.

var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);

Mieux vaut vérifier cette démo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Sur Mac, vous pouvez utiliser l' éditeur d' aperçu pour appliquer l'opacité à un rectangle blanc posé sur votre image .png avant de la placer dans votre .css.

1)
Logo d' image

2) Créer un rectangle autour de l'image
Rectanle autour du logo

3) Changer la couleur d'arrière-plan en
rectangle blanc devenu blanc

4) Ajuster l'opacité du rectangle
image opaque

Attribuez récursivement l'opacité 1.0 à l'enfant avec:

div > div { opacity: 1.0 }

Exemple:

div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }

<div style="background-color: #f00; padding:20px;">
  <div style="background-color: #0f0; padding:20px;">
    <div style="background-color: #00f; padding:20px;">
      <div style="background-color: #000; padding:20px; color:#fff">
         Example Text - No opacity definition
      </div>
    </div>  
  </div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
  <div style="opacity:0.5; background-color: #0f0; padding:20px;">
    <div style="opacity:0.5; background-color: #00f; padding:20px;">
      <div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
        Example Text - 50% opacity inherited
      </div>
    </div>  
  </div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
  <div class="x" style="background-color: #0f0; padding:20px;">
    <div class="x" style="background-color: #00f; padding:20px;">
      <div class="x" style="background-color: #000; padding:20px; color:#fff">
         Example Text - 50% opacity not inherited
      </div>
    </div>  
  </div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
  Example Text - 50% opacity
</div>

Pour les autres personnes essayant de faire en sorte qu'un tableau (ou quelque chose) ait l'air concentré sur une ligne en utilisant l'opacité. Comme @Blowski a dit d'utiliser la couleur et non l'opacité. Découvrez ce violon: http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)