Ich möchte die Deckkraft des untergeordneten Elements nicht von dem übergeordneten Element in CSS übernehmen

Question

Ich möchte die Deckkraft des untergeordneten Elements nicht von dem übergeordneten Element in CSS erben.

Ich habe ein Div, das das Elternteil ist, und ich habe ein anderes Div innerhalb des ersten Divs, das das Kind ist.

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

Wie kann ich das tun?

Answer 1

Anstatt Deckkraft zu verwenden, legen Sie eine Hintergrundfarbe mit rgba fest, wobei 'a' der Grad der Transparenz ist.

Also stattdessen:

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

verwenden.

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

Answer 2

Die Deckkraft wird in CSS nicht wirklich vererbt. Es handelt sich um eine Gruppentransformation nach dem Rendering. Mit anderen Worten, wenn eine <div> Opazität gesetzt hat, rendert man das Div und alle seine Kinder in einen temporären Puffer und fügt dann den gesamten Puffer in die Seite mit der gegebenen Opazitätseinstellung ein.

Was genau Sie hier tun wollen, hängt von der genauen Darstellung ab, nach der Sie suchen, was aus der Frage nicht klar hervorgeht.

Answer 3

Ein kleiner Trick, wenn Ihr Elternteil transparent ist und Sie möchten, dass Ihr Kind dasselbe ist, aber exklusiv definiert ist (z. B. um die User-Agent-Stile eines Dropdowns zu überschreiben):

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

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

Answer 4

Wie bereits in diesem und anderen ähnlichen Threads erwähnt, lässt sich dieses Problem am besten durch die Verwendung von RGBA/HSLA oder durch die Verwendung eines transparenten PNG vermeiden.

Aber, wenn Sie eine lächerliche Lösung, ähnlich wie die in einer anderen Antwort in diesem Thread (die auch meine Website), hier ist eine brandneue Skript, das ich schrieb, dass dieses Problem automatisch behebt, genannt thatsNotYoChild.js:

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

Grundsätzlich verwendet es JavaScript, um alle untergeordneten Elemente aus dem übergeordneten Div zu entfernen und dann die untergeordneten Elemente wieder dort zu positionieren, wo sie sein sollten, ohne tatsächlich Kinder dieses Elements zu sein.

Meiner Meinung nach sollte dies der letzte Ausweg sein, aber ich dachte, es würde Spaß machen, etwas zu schreiben, das dies tut, falls jemand dies tun möchte.

Answer 5

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

Aber wir können die Eigenschaft css position verwenden, um unser Ziel zu erreichen.

Das Text-Container-Div kann außerhalb des übergeordneten Divs platziert werden, aber mit absoluter Positionierung, die den gewünschten Effekt projiziert.

Ideal Requirement------------------>>>>>>>>>>>>

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, weil er die Deckkraft vom übergeordneten Div erbt.

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

Ausgang :

der Text ist mit der gleichen Farbe wie der Hintergrund sichtbar, da das div nicht im transparenten div ist