No quiero heredar la opacidad secundaria del padre en CSS
No quiero heredar la opacidad secundaria 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 principal, pero no quiero que el div secundario 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;
usar
background-color: rgba(0,0,255,0.5);
En realidad, la opacidad no se hereda en CSS. Es una transformación grupal posterior al renderizado. En otras palabras, si a <div>tiene configurada la opacidad, representa 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 cual no queda claro en la pregunta.
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);
}
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 quieres una solución ridícula, similar a la que está vinculada en otra respuesta de este hilo (que también es mi sitio web), aquí tienes un nuevo script que escribí que soluciona este problema automáticamente, llamado thatsNotYoChild.js:
http://www.impressionwebs.com/fixing-parent-child-opacity/
Básicamente, utiliza JavaScript para eliminar todos los elementos secundarios del div principal y luego reposicionar los elementos secundarios a donde deberían estar sin volver a ser hijos de ese elemento.
Para mí, esto debería ser el último recurso, pero pensé que sería divertido escribir algo que hiciera esto, si alguien quiere hacerlo.
