cómo cancelar la opacidad para un elemento secundario?

Deseo aplicar la opacidad para el elemento primario, pero no deseo que el elemento hijo herede esta opacidad.

.parent { opacity: 0.6; }

¿Hay alguna manera de “cancelar” la opacidad heredada? tal vez forzarlo a la opacity=1 para el elemento hijo?

La opacidad del niño siempre será la opacidad del elemento principal si la opacidad del niño es 1.

Esto no es un problema con la herencia, sino más bien con la forma en que se calcula la opacidad.

Por ejemplo,

 
#parent div, #quarter { width: 100px; height: 100px; background-color: orange; } #parent div { opacity: 0.5; } #parent { opacity: 0.5; } #quarter { opacity: 0.25; }

La opacidad de #quarter , desde su perspectiva, es la misma que la de #parent div , pero en realidad, #parent div tiene el doble de opacidad de #quarter . Vea este jsfiddle para más detalles: http://jsfiddle.net/HUaNm/


La única forma de evitar esto es alejar al niño del padre. Alternativamente, dependiendo de lo que desee aquí, también puede usar colores rgba para el color de fondo / borde / fuente del elemento primario en lugar de opacidad, pero el efecto no es lo mismo que aplicar opacidad.

si tiene un color de fondo parental – use RGBA, si tiene una imagen principal – use una capa RGBA adicional entre divs padres e hijos jugando con la posición css.