Hace poco, durante el diseño de un proyecto, se me presentó la necesidad de poner un texto fijo sobre una transición de imágenes. El problema es que el texto se perdía y no se leía bien. La solución más rápida hubiera sido ponerle un fondo del color opuesto y así solucionaba el problema, pero un bloque sobre la imagen se veía muy mal, pesado, grueso, etc. En efecto sí puse un bloque de texto, pero lo integré en las fotos, bajándole la opacidad y creando una transparencia. Esto lo hice con la propiedad de CSS opacity. Les muestro un ejemplo.
HTML
<div class="opaco" id="layer_prueba">
<p>Texto de prueba</p>
</div>
ESTILOS
/*---- Le damos forma a la capa que contendrá el texto -----*/
#layer_prueba {
background: transparente url(http://theproc.es/files/1908?xsf_version=-895779747) no-repeat, scroll 0 0;
height:100px;
margin: 0;
padding: 20px;
width: 200px;
}
/*------ Le damos color al texto -----*/
#layer_prueba p {
color:#ff0000;
font-size:18px;
font-weight:bold;
}
/*------ Le aplicamos la transparencia al div "layer" -----*/
.opaco {
filter: alpha(opacity=50); /*---- para que funcione en IE ----*/
opacity: .5; /*--------- para en el resto de navegadores ----*/
}
Debemos tener en cuenta un pequeño "handy cap" de esta propiedad, y es que la opacidad se le aplicará a todo los hijos del elemento a la que se le aplica. Aunque posteriormente le definamos a dichos hijos una opacidad nula, seguirán adquiriendo la propiedad del padre.
