No deseo heredar la opacidad secundaria del elemento primario en CSS

No quiero heredar la opacidad secundaria del elemento primario en CSS.

Tengo un div que es el padre, y tengo otro div dentro del primer div que es el niño.

Quiero establecer la propiedad de opacidad en el div principal, pero no quiero que el div infantil 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 en realidad no se hereda en CSS. Es una transformación de grupo posterior a la representación. En otras palabras, si un

tiene la opacidad configurada, convierte el div y todos sus hijos en un búfer temporal, y luego combina ese búfer completo en la página con la configuración de opacidad dada.

Lo que exactamente quiere hacer aquí depende del renderizado exacto que está buscando, lo cual no está claro a partir de la pregunta.

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

Pero, si quieres una solución ridícula, similar a la que está vinculada en otra respuesta en este hilo (que también es mi sitio web), aquí hay un nuevo script 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 a todos los elementos secundarios del div principal, y luego vuelve a colocar los elementos secundarios nuevamente donde deberían estar sin ser realmente hijos de ese elemento.

Para mí, este debería ser el ú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 le gustaría 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 principal.

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

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

Requisito ideal —————— >>>>>>>>>>>>

HTML

  
The text opacity is inherited from the parent 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:–

Opacidad heredada de texto (el color del texto es # 000; pero no visible)

el Texto no es visible porque hereda la opacidad del div principal.

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

HTML

  
Opacity is not inherited from parent div "bar"

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:

No Heredado

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

La pregunta no se definió si el fondo es un color o una imagen, pero como @Blowski ya respondió por los fondos de color, a continuación se muestra un truco para las imágenes:

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

De esta forma puedes manipular el color de tu opacidad e incluso agregar bonitos 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; } 
 

Question 5770341

Parece que la display: block elementos del display: block no heredan la opacidad de la display: inline padres en display: inline .

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 parecen complicadas para mí, 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; } 
 
Content of no opacity children

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.

Si tiene que usar una imagen como fondo transparente, es posible que pueda trabajar con un pseudo elemento:

html

 

I have 100% opacity

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 es sobre el diseño estático de elementos primarios y secundarios, sino sobre las animaciones.

Estaba haciendo una demostración de svg hoy, y necesitaba svg para estar dentro de div (porque svg se crea con el ancho y la altura div de los padres, para animar la ruta), y este div principal tenía que ser invisible durante la animación svg path (y luego se suponía que este div animate opacity from 0 to 1 , es la parte más importante). Y como div principal con opacity: 0 estaba ocultando mi svg, me encontré con este truco con la opción de visibility (niño con visibility: visible se puede ver en el padre con la 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 clase .invisible con la función de tiempo de espera, agrega la clase .opacity-zero , .opacity-zero diseño con algo como whatever.style.top; y eliminando la clase .opacity-zero .

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

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

Asigne opacity 1.0 al niño recursivamente con:

 div > div { opacity: 1.0 } 

Ejemplo:

 div.x { opacity: 0.5 } div.x > div.x { opacity: 1.0 } 
 
Example Text - No opacity definition
Example Text - 50% opacity inherited
Example Text - 50% opacity not inherited
Example Text - 50% opacity

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

 

y css:

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

En caso de que tenga colores / imágenes de fondo en el elemento principal, corrija la opacidad del color con rgba y background-image aplicando filtros alfa

Para otras personas que intentan hacer que una mesa (o algo) parezca enfocada en una fila usando opacidad. Al igual que @Blowski, dijo usar color, no opacidad. Mira este violín: http://jsfiddle.net/2en6o43d/

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