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.CSS - Texto opaco en baja opacidad div?
¿Hay alguna manera de anular este nivel y hacer que el texto aparezca en negro?
Cualquier consejo apreciado.
Gracias.
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 achieve this in a backwards compatible way.
La opacidad se aplica a todo el div y todos sus elementos secundarios. 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 de un píxel blanco con un 60% de opacidad.
Otra solución sería usar diferentes cajas y posicionamiento, como se describe en this tutorial by Steven York.
esto debe responder a casi todas sus preguntas: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
La solución más sencilla sería la creación de un archivo PNG semitransparente con el color correcto y el uso que como 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>
Usted había necesidad de añadir sus propias posiciones/tamaños (los top, left, width y height propiedades), según corresponda.
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.
Haciendo 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 solo píxel semitransparente .PNG here.
¿IE7 e IE8 admiten PNG transparentes? –
señor de roca, usted hace. –
Esto no funcionó para mí. ¿Por qué? –