Nie chcę dziedziczyć nieprzezroczystości dziecka od rodzica w CSS

Nie chcę dziedziczyć nieprzezroczystości dziecka od rodzica w CSS.

Mam jednego diva, który jest rodzicem, i mam innego diva w pierwszym divie, którym jest dziecko.

Chcę ustawić właściwość krycia w div macierzystym, ale nie chcę, aby div potomny odziedziczył właściwość opacity.

Jak mogę to zrobić?

Zamiast używać krycia, ustaw kolor tła za pomocą rgba, gdzie „a” oznacza poziom przezroczystości.

Więc zamiast:

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

posługiwać się

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

Krycie nie jest w rzeczywistości dziedziczone w CSS. To transformacja grupy po renderowaniu. Innymi słowy, jeśli a <div>ma ustawiony krycie, renderujesz div i wszystkie jego dzieciaki w tymczasowy bufor, a następnie łączysz cały bufor w stronę z danym ustawieniem krycia.

To, co dokładnie chcesz tutaj zrobić, zależy od dokładnego renderowania, którego szukasz, co nie wynika z pytania.

Jak inni wspominali w tym i innych podobnych wątkach, najlepszym sposobem na uniknięcie tego problemu jest użycie RGBA / HSLA lub użycie przezroczystego PNG.

Ale jeśli chcesz absurdalnego rozwiązania, podobnego do tego, do którego link znajduje się w innej odpowiedzi w tym wątku (który jest również moją stroną internetową), oto zupełnie nowy skrypt, który napisałem, który automatycznie rozwiązuje ten problem, o nazwie thatsNotYoChild.js:

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

Zasadniczo używa JavaScript, aby usunąć wszystkie elementy potomne z rodzica div, a następnie zmienić położenie elementów potomnych z powrotem tam, gdzie powinny być, bez faktycznego bycia dziećmi tego elementu.

Dla mnie to powinno być ostatecznością, ale pomyślałem, że fajnie byłoby napisać coś, co to zrobiło, jeśli ktoś chciałby to zrobić.

Trochę sztuczki, jeśli twój rodzic jest przezroczysty i chciałbyś, aby twoje dziecko było takie samo, ale zdefiniowane wyłącznie (np. W celu zastąpienia stylów użytkownika wybranego menu rozwijanego):

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

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

Krycie elementu podrzędnego jest dziedziczone z elementu nadrzędnego.

Ale możemy użyć właściwości position css, aby osiągnąć nasze osiągnięcie.

Div kontenera tekstowego można umieścić poza div div nadrzędnym, ale z absolutnym pozycjonowaniem wyświetlającym pożądany efekt.

Idealne wymagania ------------------ >>>>>>>>>>>>

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;

               }

Wynik:--

Tekst nie jest widoczny, ponieważ dziedziczy nieprzezroczystość od rodzica div.

Rozwiązanie ------------------- >>>>>>

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

Wynik :

tekst jest widoczny w tym samym kolorze co tło, ponieważ div nie jest w przezroczystej div

Pytanie nie zdefiniowało, czy tło jest kolorem, czy obrazem, ale ponieważ @Blowski już odpowiedział na kolorowe tło, poniżej można zhakować obrazy:

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

W ten sposób możesz manipulować kolorem krycia, a nawet dodawać ładne efekty gradientu.

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

Wygląda na to, że display: blockelementy nie dziedziczą zmętnienia po display: inlinerodzicach.

Przykład Codepen

Może dlatego, że jest to nieprawidłowy znacznik, a przeglądarka potajemnie je oddziela? Ponieważ źródło tego nie pokazuje. Czy coś brakuje?

Odpowiedzi powyżej wydają mi się skomplikowane, więc napisałem to:

#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-overlayto twój (nieprzezroczysty) rodzic, pop-upto twój (brak nieprzezroczystości) dzieci. Wszystko poniżej to reszta witryny.

Nie ma jednego uniwersalnego podejścia, ale szczególnie pomocne było ustawienie krycia dla bezpośrednich dzieci div, z wyjątkiem tego, które chcesz zachować w pełni widoczne. W kodzie:

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

i css:

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

W przypadku, gdy masz kolory / obrazy tła na elemencie macierzystym, naprawiasz krycie kolorów za pomocą rgba i obrazu tła, stosując filtry alfa

Jeśli musisz użyć obrazu jako przezroczystego tła, możesz być w stanie go obejść za pomocą pseudoelementu:

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

Moja odpowiedź nie dotyczy statycznego układu rodzic-dziecko, ale animacji.

Robiłem dzisiaj wersję demonstracyjną svg i potrzebowałem svg, aby być wewnątrz div (ponieważ svg jest tworzony z szerokością i wysokością div rodzica, aby animować ścieżkę dookoła), a ten div rodzicielski musiał być niewidoczny podczas animacji ścieżki svg (a następnie ten div miał to być animate opacity from 0 to 1, najważniejsza część). A ponieważ div div z opacity: 0ukrywał mój svg, natknąłem się na ten hack z visibilityopcją (dziecko z visibility: visiblemożna zobaczyć wewnątrz rodzica z 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;
}

A następnie, w js, usuwasz .invisibleklasę z funkcją timeout, dodajesz .opacity-zeroklasę, uruchamiasz układ z czymś podobnym whatever.style.top;i usuwasz .opacity-zeroklasę.

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

Lepiej sprawdzić to demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Na komputerze Mac możesz użyć edytora podglądu, aby zastosować krycie do białego prostokąta nałożonego na obraz .png, zanim umieścisz go w pliku .css.

1)
Logo obrazu

2) Utwórz prostokąt wokół obrazu
Prostokąt wokół logo

3) Zmień kolor tła na biały
prostokąt zmienił kolor na biały

4) Dostosuj prostokąt krycie
nieprzezroczystego obrazu

Przypisz kruchość 1.0 do dziecka rekurencyjnie za pomocą:

div > div { opacity: 1.0 }

Przykład:

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>

Dla innych osób, które starają się, aby stół (lub coś takiego) wyglądał na skoncentrowany na jednym rzędzie za pomocą krycia. Jak powiedział @Blowski, użyj koloru, a nie krycia. Sprawdź to skrzypce: http://jsfiddle.net/2en6o43d/

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