No quiero heredar la opacidad del niño del padre en CSS

No quiero heredar la opacidad del niño del padre en CSS.

Tengo un div que es el padre, y tengo otro div dentro del primer div que es el hijo.

Quiero establecer la propiedad de opacidad en el div padre, pero no quiero que el div hijo herede la propiedad de opacidad.

¿Cómo puedo hacer eso?

En lugar de usar opacidad, establezca un color de fondo con rgba, donde 'a' es el nivel de transparencia.

Entonces en lugar de:

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

utilizar

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

La opacidad no se hereda realmente en CSS. Es una transformación de grupo posterior a la representación. En otras palabras, si a <div>tiene un conjunto de opacidad, renderiza el div y todos sus elementos secundarios en un búfer temporal, y luego compone todo ese búfer en la página con la configuración de opacidad dada.

Lo que desea hacer exactamente aquí depende de la representación exacta que está buscando, lo que no está claro en la pregunta.

Como otros han mencionado en este y otros hilos similares, la mejor manera de evitar este problema es usar RGBA / HSLA o usar un PNG transparente.

Pero, si desea una solución ridícula, similar a la vinculada en otra respuesta en este hilo (que también es mi sitio web), aquí hay un script nuevo que escribí que soluciona este problema automáticamente, llamado thatsNotYoChild.js:

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

Básicamente, usa JavaScript para eliminar todos los elementos secundarios del elemento primario principal, luego vuelve a colocar los elementos secundarios de nuevo donde deberían estar sin ser realmente elementos secundarios de ese elemento.

Para mí, esto debería ser un último recurso, pero pensé que sería divertido escribir algo que hiciera esto, si alguien quiere hacer esto.

Un pequeño truco si su padre es transparente y desea que su hijo sea el mismo, pero definido exclusivamente (por ejemplo, para sobrescribir los estilos de agente de usuario de un menú desplegable de selección):

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

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

La opacidad del elemento hijo se hereda del elemento padre.

Pero podemos usar la propiedad de posición css para lograr nuestro logro.

El contenedor de texto div se puede colocar fuera del padre primario pero con un posicionamiento absoluto que proyecta el efecto deseado.

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;

               }

Salida:--

el texto no es visible porque hereda la opacidad del div padre.

Solución ------------------- >>>>>>

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

Salida:

el texto es visible con el mismo color que el fondo porque el div no está en el div transparente

La pregunta no definió si el fondo es un color o una imagen, pero dado que @Blowski ya ha respondido para fondos de color, hay un truco para las imágenes a continuación:

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

De esta manera, puede manipular el color de su opacidad e incluso agregar buenos efectos de degradado.

.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 los display: blockelementos no heredan la opacidad de los display: inlinepadres.

Ejemplo de codepen

¿Tal vez porque es un marcado no válido y el navegador los está separando en secreto? Porque la fuente no muestra que eso suceda. ¿Me estoy perdiendo de algo?

Las respuestas anteriores me parecen complicadas, así que escribí esto:

#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-overlayes su padre (opacidad), pop-upson sus hijos (sin opacidad). Todo lo que está debajo es el resto de tu sitio.

No existe un enfoque único para todos, pero una cosa que encontré particularmente útil es establecer la opacidad para los hijos directos de un div, excepto el que desea mantener completamente visible. En codigo:

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

y css:

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

En caso de que tenga colores / imágenes de fondo en el padre, arregle la opacidad del color con rgba e imagen de fondo aplicando filtros alfa

Si tiene que usar una imagen como fondo transparente, es posible que pueda evitarla utilizando un 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%;
}

Mi respuesta no se trata del diseño estático padre-hijo, se trata de animaciones.

Estaba haciendo una demostración de svg hoy, y necesitaba que svg estuviera dentro de div (porque svg se crea con el ancho y la altura del div principal, para animar la ruta), y este div primario debía ser invisible durante la animación de la ruta svg (y luego se suponía que este div era animate opacity from 0 to 1la parte más importante). Y debido a que parent div with opacity: 0estaba ocultando mi svg, me encontré con este hack con la visibilityopción (child with visibility: visiblese puede ver 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;
}

Y luego, en js, elimina la .invisibleclase con la función de tiempo de espera, agrega la .opacity-zeroclase, activa el diseño con algo como whatever.style.top;y elimina la .opacity-zeroclase.

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

Es mejor consultar esta demostración http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

En Mac , puede usar el editor de vista previa para aplicar opacidad a un rectángulo blanco sobre su imagen .png antes de ponerlo en su .css.

1)
Logotipo

de la imagen 2) Crear un rectángulo alrededor de la imagen
Rectángulo alrededor del logotipo

3) Cambiar el color de fondo a un
rectángulo blanco convertido en blanco

4) Ajustar la opacidad del rectángulo
imagen opaca

Asigne opacidad 1.0 al niño de forma recursiva con:

div > div { opacity: 1.0 }

Ejemplo:

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 otras personas que intentan hacer que una tabla (o algo) se vea enfocada en una fila usando opacidad. Como dijo @Blowski, use color, no opacidad. Echa un vistazo a este violín: http://jsfiddle.net/2en6o43d/

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