Eu não quero herdar a opacidade filho do pai no CSS

Eu não quero herdar a opacidade filho do pai no CSS.

Eu tenho uma div que é o pai e outra dentro da primeira div que é a criança.

Quero definir a propriedade opacity na div pai, mas não quero que a div child herde a propriedade opacity.

Como eu posso fazer isso?

Em vez de usar opacidade, defina uma cor de fundo com rgba, onde 'a' é o nível de transparência.

Então, em vez de:

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

usar

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

A opacidade não é realmente herdada no CSS. É uma transformação de grupo pós-renderização. Em outras palavras, se um<div> tiver opacidade definida, você renderiza a div e todos os seus filhos em um buffer temporário e, em seguida, compõe esse buffer inteiro na página com a configuração de opacidade especificada.

O que exatamente você quer fazer aqui depende da renderização exata que você está procurando, o que não está claro na pergunta.

Como outros usuários mencionaram neste e em outros threads semelhantes, a melhor maneira de evitar esse problema é usar RGBA / HSLA ou usar um PNG transparente.

Mas, se você quiser uma solução ridícula, semelhante à vinculada em outra resposta neste tópico (que também é meu site), aqui está um novo script que escrevi que corrige esse problema automaticamente, chamado thatsNotYoChild.js:

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

Basicamente, ele usa JavaScript para remover todos os filhos da div pai e, em seguida, reposicionar os elementos filhos de volta ao local em que deveriam estar, sem ser realmente filhos desse elemento.

Para mim, esse deveria ser o último recurso, mas achei que seria divertido escrever algo que fizesse isso, se alguém quiser fazer isso.

Um pequeno truque se seu pai for transparente e você desejar que seu filho seja o mesmo, mas definido exclusivamente (por exemplo, para substituir os estilos de agente de usuário de um menu suspenso selecionado):

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

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

A opacidade do elemento filho é herdada do elemento pai.

Mas podemos usar a propriedade css position para realizar nossa conquista.

A div do contêiner de texto pode ser colocada fora da div pai, mas com o posicionamento absoluto projetando o efeito desejado.

Requisito ideal ------------------ >>>>>>>>>>>>>

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;

               }

Resultado:--

o texto não está visível porque herdou a opacidade da div pai.

Solução ------------------- >>>>>>

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

Resultado :

o texto é visível com a mesma cor do plano de fundo porque a div não está na div transparente

A pergunta não definiu se o plano de fundo é uma cor ou uma imagem, mas como o @Blowski já respondeu por planos de fundo coloridos, há um hack para as imagens abaixo:

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

Dessa forma, você pode manipular a cor da sua opacidade e até adicionar bons efeitos de gradiente.

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

Parece que os display: blockelementos não herdam a opacidade dos display: inlinepais.

Exemplo de Codepen

Talvez por ser uma marcação inválida e o navegador os esteja separando secretamente? Porque a fonte não mostra isso acontecendo. Estou esquecendo de algo?

As respostas acima parecem complicadas para mim, então escrevi o seguinte:

#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é seu pai (opacidade), pop-upsão seus filhos (sem opacidade). Tudo abaixo do restante do seu site.

Não existe uma abordagem de tamanho único, mas uma coisa que achei particularmente útil é definir opacidade para os filhos diretos de uma div, exceto a que você deseja manter totalmente visível. Em código:

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

Caso você tenha cores / imagens de plano de fundo no pai, corrija a opacidade das cores com rgba e imagem de plano de fundo aplicando filtros alfa

Se você precisar usar uma imagem como plano de fundo transparente, poderá contorná-la usando um 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%;
}

Minha resposta não é sobre layout estático de pais e filhos, é sobre animações.

Eu estava fazendo uma demo svg hoje e precisava que o svg estivesse dentro de div (porque o svg é criado com a largura e a altura do div dos pais, para animar o caminho), e esse div pai precisava ficar invisível durante a animação do caminho svg (e depois essa div deveria animate opacity from 0 to 1, é a parte mais importante). E como parent div opacity: 0estava escondendo meu svg, me deparei com esse hack com a visibilityopção (child with visibility: visiblepode ser visto dentro de parent with 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 então, em js, você remove a .invisibleclasse com a função timeout, adicionando .opacity-zeroclasse, aciona o layout com algo como whatever.style.top;e remove a .opacity-zeroclasse.

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

Melhor verificar esta demonstração http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

No mac, você pode usar o editor de visualização prévia para aplicar opacidade a um retângulo branco colocado sobre a imagem .png antes de colocá-la no .css.

1)
Logotipo da imagem

2) Crie um retângulo ao redor da imagem
Retângulo ao redor do logotipo

3) Altere a cor do plano de fundo para o
retângulo branco que ficou branco

4) Ajuste a imagem opaca da opacidade do retângulo

Atribua a opacidade 1.0 à criança recursivamente com:

div > div { opacity: 1.0 }

Exemplo:

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>

Para outras pessoas que tentam fazer uma tabela (ou algo assim) parecer focada em uma linha usando opacidade. Como o @Blowski disse, use cores e não opacidade. Confira este violino: http://jsfiddle.net/2en6o43d/

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