Non voglio ereditare l'opacità figlio dal genitore in CSS

Non voglio ereditare l'opacità figlio dal genitore in CSS.

Ho un div che è il genitore e ho un altro div all'interno del primo div che è il bambino.

Voglio impostare la proprietà dell'opacità nel div padre, ma non voglio che il div figlio erediti la proprietà dell'opacità.

Come lo posso fare?

Invece di usare l'opacità, imposta un colore di sfondo con rgba, dove "a" è il livello di trasparenza.

Quindi invece di:

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

uso

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

L'opacità non è effettivamente ereditata nei CSS. È una trasformazione di gruppo post-rendering. In altre parole, se a <div>ha un'opacità impostata, renderizza div e tutti i suoi figli in un buffer temporaneo, quindi componi l'intero buffer nella pagina con l'impostazione di opacità fornita.

Quello che esattamente vuoi fare qui dipende dal rendering esatto che stai cercando, il che non è chiaro dalla domanda.

Come altri hanno già detto in questo e in altri thread simili, il modo migliore per evitare questo problema è usare RGBA / HSLA oppure usare un PNG trasparente.

Ma, se vuoi una soluzione ridicola, simile a quella collegata in un'altra risposta in questo thread (che è anche il mio sito Web), ecco un nuovo script che ho scritto che risolve automaticamente questo problema, chiamato thatsNotYoChild.js:

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

Fondamentalmente utilizza JavaScript per rimuovere tutti i figli dal div genitore, quindi riposizionare gli elementi figlio nel punto in cui dovrebbero trovarsi senza essere effettivamente figli di quell'elemento.

Per me, questa dovrebbe essere l'ultima risorsa, ma ho pensato che sarebbe stato divertente scrivere qualcosa che lo facesse, se qualcuno volesse farlo.

Un piccolo trucco se il tuo genitore è trasparente e desideri che tuo figlio sia lo stesso, ma definito esclusivamente (ad es. Per sovrascrivere gli stili agente utente di un menu a discesa selezionato):

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

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

L'opacità dell'elemento figlio viene ereditata dall'elemento padre.

Ma possiamo usare la proprietà position css per raggiungere i nostri risultati.

Il div del contenitore di testo può essere posizionato al di fuori del div parent ma con il posizionamento assoluto proiettando l'effetto desiderato.

Requisito ideale ------------------ >>>>>>>>>>>>

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;

               }

Produzione:--

il testo non è visibile perché eredita l'opacità dal div padre.

Soluzione ------------------- >>>>>>

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

Produzione :

il testo è visibile con lo stesso colore dello sfondo perché il div non si trova nel div trasparente

La domanda non ha definito se lo sfondo è un colore o un'immagine ma poiché @Blowski ha già risposto per gli sfondi colorati, c'è un trucco per le immagini qui sotto:

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

In questo modo puoi manipolare il colore della tua opacità e persino aggiungere piacevoli effetti sfumati.

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

Sembra che gli display: blockelementi non ereditino l'opacità dai display: inlinegenitori.

Esempio Codepen

Forse perché è un markup non valido e il browser li sta segretamente separando? Perché la fonte non mostra che ciò accada. Mi sto perdendo qualcosa?

Le risposte sopra sembrano complicate per me, quindi ho scritto questo:

#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è il tuo genitore (opacità), pop-upsono i tuoi figli (senza opacità). Tutto sotto è il resto del tuo sito.

Non esiste un approccio unico per tutti, ma una cosa che ho trovato particolarmente utile è impostare l'opacità per i figli diretti di un div, tranne quello che vuoi mantenere pienamente visibile. Nel codice:

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

e css:

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

Nel caso in cui tu abbia colori / immagini di sfondo sul genitore, correggi l'opacità del colore con rgba e l'immagine di sfondo applicando i filtri alfa

Se devi usare un'immagine come sfondo trasparente, potresti essere in grado di aggirarla usando uno pseudo elemento:

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

La mia risposta non riguarda il layout padre-figlio statico, ma le animazioni.

Oggi stavo facendo una demo svg, e avevo bisogno che svg fosse all'interno del div (perché svg è stato creato con la larghezza e l'altezza div del genitore, per animare il percorso intorno), e questo div genitore doveva essere invisibile durante l'animazione del percorso svg (e poi questo div doveva animate opacity from 0 to 1, è la parte più importante). E poiché il div genitore opacity: 0nascondeva il mio svg, mi sono imbattuto in questo hack con l' visibilityopzione (il bambino con visibility: visiblepuò essere visto all'interno del genitore con 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;
}

E poi, in js, si rimuove la .invisibleclasse con la funzione di timeout, si aggiunge la .opacity-zeroclasse, si attiva il layout con qualcosa di simile whatever.style.top;e si rimuove 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);

Meglio controllare questa demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Su Mac puoi usare l' Editor di anteprima per applicare l'opacità a un rettangolo bianco posto sopra l'immagine .png prima di inserirla nel tuo .css.

1)
Logo immagine

2) Crea un rettangolo attorno all'immagine
Rettangolo attorno al logo

3) Cambia il colore di sfondo in
rettangolo bianco diventato bianco

4) Regola l' immagine opaca del rettangolo

Assegna opacità 1.0 al bambino in modo ricorsivo con:

div > div { opacity: 1.0 }

Esempio:

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>

Per altre persone che cercano di far sembrare un tavolo (o qualcosa del genere) concentrato su una riga usando l'opacità. Come ha detto @Blowski, usa il colore non l'opacità. Dai un'occhiata a questo violino: http://jsfiddle.net/2en6o43d/

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