transparente - CSS-¿Texto opaco en baja opacidad div?

quitar opacidad css

Question

Tengo un div con 60% de opacidad, para mostrar parte de una imagen de fondo detrás del div. Como la opacidad es del 60%, el texto en ese div aparece en gris.

¿Hay algún modo de anular este nivel y hacer que el texto aparezca en negro?

Cualquier consejo apreciado.

Gracias.

Answer 1

Establezca la opacidad en el fondo en lugar del elemento.

background-color: rgba(255,0,0,0.6);

Hace un tiempo escribí sobre cómo lograr esto de una manera compatible con versiones anteriores .

Answer 2

He experimentado con esto en el pasado en mi propio sitio web. Con mucho, el método más fácil para lograr lo que desea es crear una imagen .PNG de un solo píxel con su opacidad establecida en menos del 100% (es decir, parcialmente transparente) y utilizarla como imagen de fondo. De forma predeterminada, rellenará todo el elemento que lo contiene: asegúrese de que el atributo CSS background-repeat esté configurado en "repeat" si no lo hace.

Al hacer las cosas de esta manera, no es necesario establecer la transparencia en el elemento contenedor, por lo tanto, la opacidad de su texto no se verá afectada.

Sorprendentemente, solo existe la herramienta para hacer un .PNG semitransparente de un solo píxel here .

Answer 3

La opacidad se aplica a todo el div y a todos sus hijos. Desafortunadamente, no puedes deshacer esa opacidad, sino solo agregar más. Y además de eso, no hay forma de que CSS seleccione el texto dentro de un elemento.

En su caso, la mejor solución es aplicar una imagen de fondo transparente (con PNG) a su bloque div, como una imagen blanca de un píxel con un 60% de opacidad.

Otra solución sería usar diferentes cajas y posicionamiento, como se describe en este tutorial por Steven York .

Answer 4

La solución más simple sería crear un PNG semitransparente con el color correcto y usarlo como una imagen de fondo.

Otra solución que puede ser posible dependiendo de su diseño es colocar el texto en una capa separada y colocarlo sobre la parte semitransparente. Algo como esto funcionaría:

<div style="position: relative; background-image: url(''your_image.jpg'')">
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
    <div style="position: absolute">The text to go on top</div>
</div>

Debería agregar sus propias posiciones / tamaños (las propiedades top , left , width y height ) según corresponda.

Answer 5

esto debería responder a casi todas sus preguntas: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/