cómo cancelar la opacidad para un elemento secundario?

Question

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

<div class="parent"> 
<div class="child"></div> 
</div> 

.parent { 
    opacity: 0.6; 
} 

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

Answer 1

La opacidad del niño siempre habrá la opacidad de los padres si la opacidad del niño es 1.

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

Por ejemplo,

<div id="parent"> 
    <div></div> 
</div> 

<div id="original"> 
</div> 

<div id="quarter"> 
</div> 

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

#parent div { 
    opacity: 0.5; 
} 

#parent { 
    opacity: 0.5; 
} 

#quarter { 
    opacity: 0.25; 
} 

#quarter 's opacidad, desde su punto de vista, es el mismo que el de #parent div, pero en realidad, #parent div tiene el doble de la opacidad de #quarter. Ver este jsFiddle para más detalles: http://jsfiddle.net/HUaNm/

---

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