Si una imagen de fondo o un color de fondo están configurados con opacity en CSS y se superpone texto, es posible que se adopte la configuración del elemento padre y que los elementos hijos también se vuelvan transparentes.

See the Pen CSS-opacity_hex_esp by AGUA Web (@AGUA) on CodePen.

Al intentar eliminar la configuración de transparencia de un elemento hijo, poner opacity:1; no funciona aunque se utilice opacity:1!important;, lo que obliga a utilizar la configuración del elemento padre.

En este caso, especificar el color de fondo del elemento padre y el ajuste de transparencia como ‘rgba’ en lugar de números hexadecimales como #000000; parece resolver el problema (eliminar el ajuste de opacidad del elemento padre).

See the Pen Untitled by AGUA Web (@AGUA) on CodePen.

Se han utilizado como referencia los siguientes sitios, incluida la conversión de los códigos de color de hexadecimal a rgba. Muchas gracias.

Herramienta de conversión de códigos de color

https://tech-unlimited.com/color.html

関連記事: