Caray un amigo me pregunta ¿como puedo tener un texto sobre un fondo transparente sin que el texto se haga también transparente?

Inicialmente me dije, esto se resuelve en 10min, así que intenté hacerlo y para mi sorpresa me sucedía exactamente lo que mi amigo e había dicho y dije hoooo!! no puede ser!! (aunque lo veía y no lo creía)

Así que decidí buscar como resolverlo y al parece ser que no es algo muy común o al menos la solución no lo es, pero haciendo prueba, tras prueba, tras prueba, tras prueba …. hasta el agotamiento! (ok! ya no exagero!) he logrado obtener una solución por demás simple y elegante

El primer área de texto es lo que pasa y que no quiere uno que suceda, tanto el texto como el fondo se vuelven transparentes y eso sucede cuando se anidan los divs y se le aplica la transparencia el div del fondo, pero se hereda a todos los elementos dentro de este.

La segunda área de texto, es la solución correcta y la he realizado usando un div para el texto con posición absoluta y luego un div aparte para el fondo, como el div del texto no afecta en el acomodo, el div del fondo se coloca por encima del texto.

Hay varios detalles a considerar, uno es que tanto la capa del texto como del fondo deben de tener el mismo tamaño y otra importante es que la capa de texto se tiene que colocar por encima de la capa de fondo usando el z-index.

El código HTML quedarían algo así

</pre>
<h3>He aquí un ejemplo de como crear una caja con texto opaco y fondo transparente!</h3>
<div class="container">
<div class="text">Esto es el texto bien bien opaco en color azul con fondo blanco semi-trasparente!!!</div>
<div class="background trans"></div>
<div class="text">Esto es el texto bien bien opaco en color azul con fondo blanco bien bien opaco!!!</div>
<div class="background"></div>
</div>
<pre>

Ahora el CSS correspondiente es

.container {
	background-color: #FFA500;
	padding: 10px;
}

.text {
	width: 200px;
	height: 100px;
	background-color: transparent;
	padding: 10px;
	color: #0000FF;
	position: absolute;
	z-index: 1;
}

.background {
	width: 200px;
	height: 100px;
	background-color: #FFFFFF;
	padding: 10px;
	margin: 0px 0px 10px 0px;
}

.trans {
	opacity: 0.5;
}

Y con esto se ha resuelto el dilema!!

Saludos Roger!

Anuncios