Ich möchte die untergeordnete Deckkraft nicht vom übergeordneten Element in CSS erben

Ich möchte die untergeordnete Deckkraft nicht vom übergeordneten Element in CSS erben.

Ich habe eine Div, die das Elternteil ist, und ich habe eine andere Div innerhalb der ersten Div, die das Kind ist.

Ich möchte die Opazitätseigenschaft im übergeordneten Div festlegen, aber ich möchte nicht, dass das untergeordnete Div die Opazitätseigenschaft erbt.

Wie kann ich das machen?

Anstatt Deckkraft zu verwenden, legen Sie mit rgba eine Hintergrundfarbe fest, wobei 'a' die Transparenzstufe ist.

Also statt:

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

verwenden

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

Die Deckkraft wird in CSS nicht vererbt. Es ist eine Gruppentransformation nach dem Rendern. Mit anderen Worten, wenn für a <div>die Deckkraft festgelegt ist, rendern Sie das div und alle seine untergeordneten Elemente in einen temporären Puffer und fügen dann den gesamten Puffer mit der angegebenen Deckkrafteinstellung in die Seite ein.

Was genau Sie hier tun möchten, hängt vom genauen Rendering ab, das Sie suchen, was aus der Frage nicht klar hervorgeht.

Wie andere in diesem und ähnlichen Threads erwähnt haben, können Sie dieses Problem am besten vermeiden, indem Sie RGBA / HSLA oder ein transparentes PNG verwenden.

Wenn Sie jedoch eine lächerliche Lösung suchen, ähnlich der, die in einer anderen Antwort in diesem Thread (der auch meine Website ist) verlinkt ist, finden Sie hier ein brandneues Skript, das dieses Problem automatisch behebt und thatsNotYoChild.js heißt:

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

Grundsätzlich wird JavaScript verwendet, um alle untergeordneten Elemente aus dem übergeordneten div zu entfernen und die untergeordneten Elemente wieder an die Stelle zu bringen, an der sie sich befinden sollten, ohne dass sie tatsächlich untergeordnete Elemente dieses Elements sind.

Für mich sollte dies ein letzter Ausweg sein, aber ich dachte, es würde Spaß machen, etwas zu schreiben, das dies tut, wenn jemand dies tun möchte.

Ein kleiner Trick, wenn Ihre Eltern transparent sind und Sie möchten, dass Ihr Kind dasselbe ist, aber ausschließlich definiert wird (z. B. um die Benutzeragentenstile einer ausgewählten Dropdown-Liste zu überschreiben):

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

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

Die Deckkraft des untergeordneten Elements wird vom übergeordneten Element geerbt.

Wir können jedoch die CSS-Positionseigenschaft verwenden, um unsere Leistung zu erzielen.

Das Textcontainer-Div kann außerhalb des übergeordneten Div platziert werden, wobei die absolute Positionierung den gewünschten Effekt projiziert.

Ideale Voraussetzung ------------------ >>>>>>>>>>>>

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;

               }

Ausgabe:--

Der Text ist nicht sichtbar, da die Deckkraft vom übergeordneten div übernommen wurde.

Lösung ------------------- >>>>>>

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

Ausgabe :

Der Text ist mit derselben Farbe wie der Hintergrund sichtbar, da sich das Div nicht im transparenten Div befindet

Die Frage hat nicht definiert, ob der Hintergrund eine Farbe oder ein Bild ist, aber da @Blowski bereits für farbige Hintergründe geantwortet hat, gibt es unten einen Hack für Bilder:

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

Auf diese Weise können Sie die Farbe Ihrer Deckkraft ändern und sogar schöne Verlaufseffekte hinzufügen.

.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>

Es scheint, dass display: blockElemente keine Opazität von den display: inlineEltern erben .

Codepen Beispiel

Vielleicht, weil es ein ungültiges Markup ist und der Browser sie heimlich trennt? Weil die Quelle das nicht zeigt. Vermisse ich etwas

Die obigen Antworten scheinen mir kompliziert zu sein, deshalb habe ich Folgendes geschrieben:

#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-overlayEs ist dein (undurchsichtiger) Elternteil, pop-upes sind deine (keine undurchsichtigen) Kinder. Alles darunter ist der Rest Ihrer Website.

Es gibt keinen einheitlichen Ansatz, aber eine Sache, die ich besonders hilfreich fand, ist das Einstellen der Deckkraft für die direkten Kinder eines Divs, mit Ausnahme derjenigen, die Sie vollständig sichtbar halten möchten. In Code:

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

und css:

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

Wenn Sie Hintergrundfarben / -bilder auf dem übergeordneten Element haben, korrigieren Sie die Farbopazität mit rgba und Hintergrundbild, indem Sie Alphafilter anwenden

Wenn Sie ein Bild als transparenten Hintergrund verwenden müssen, können Sie es möglicherweise mit einem Pseudoelement umgehen:

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

In meiner Antwort geht es nicht um statisches Eltern-Kind-Layout, sondern um Animationen.

Ich habe heute eine SVG-Demo gemacht, und ich brauchte SVG, um innerhalb von Div zu sein (da SVG mit der Div-Breite und -Höhe des Elternteils erstellt wird, um den Pfad zu animieren), und dieses Eltern-Div musste während der SVG-Pfadanimation (und dann) unsichtbar sein Diese Div sollte animate opacity from 0 to 1, es ist der wichtigste Teil). Und weil Eltern-Div mit opacity: 0mein SVG versteckt hat, bin ich auf diesen Hack mit visibilityOption gestoßen (Kind mit visibility: visiblekann im Elternteil mit gesehen werden 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;
}

Und dann entfernen Sie in js eine .invisibleKlasse mit Timeout-Funktion, fügen eine .opacity-zeroKlasse hinzu , lösen ein Layout mit so etwas aus whatever.style.top;und entfernen eine .opacity-zeroKlasse.

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

Überprüfen Sie besser diese Demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Auf einem Mac können Sie den Vorschau- Editor verwenden, um einem weißen Rechteck, das über Ihrem PNG-Bild liegt, Deckkraft zu verleihen, bevor Sie es in Ihre CSS-Datei einfügen.

1) Bild
Logo

2) Erstellen Sie ein Rechteck um das Bild
Rectanle um Logo

3) Hintergrundfarbe ändern , um weißes
Rechteck gedreht weiß

4) Rechteck Opazität einstellen
undurchsichtiges Bild

Weisen Sie dem Kind rekursiv die Deckkraft 1.0 zu mit:

div > div { opacity: 1.0 }

Beispiel:

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>

Für andere Personen, die versuchen, eine Tabelle (oder etwas anderes) mit Deckkraft auf eine Zeile zu fokussieren. Wie @Blowski sagte, benutze Farbe nicht Deckkraft. Schauen Sie sich diese Geige an: http://jsfiddle.net/2en6o43d/

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