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

In der Frage wurde 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 der Deckkraft manipulieren 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>

Answer 2

Es gibt keine Einheitsgröße für alle, aber eine Sache, die ich als besonders hilfreich empfunden habe, ist die Einstellung der Deckkraft für die direkten Kinder eines Divs, mit Ausnahme desjenigen, das vollständig sichtbar bleiben soll. Im 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;
}

Falls Sie Hintergrundfarben/-bilder auf dem Elternteil haben, können Sie die Farbdeckung mit rgba und background-image durch Anwendung von Alpha-Filtern festlegen

Answer 3

Die obigen Antworten scheinen mir zu kompliziert zu sein, deshalb habe ich dies 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-overlay es ist Ihr (Opazität) Elternteil, pop-up es sind deine Kinder (ohne Opazität). Alles, was darunter liegt, ist der Rest Ihrer Website.

Answer 4

Das Folgende hat bei mir funktioniert:

1. Geändert

Von:

opacity: 0.52;
background-color: #7c7c7c;

An:

opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;

Zur Umwandlung der hex & opacity まで rgba ,
Verwenden Sie eine Website wie http://hex2rgba.devoth.com/

Answer 5

Es scheint, dass display: block Elemente erben die Deckkraft nicht von display: inline Eltern.

Codepen-Beispiel

Vielleicht, weil es ungültiges Markup ist und der Browser sie heimlich trennt? Denn der Quelltext zeigt nicht, dass das passiert. Übersehe ich etwas?