unijimpe

CSS además de permitir el manejo del formato de los textos en HTML brinda métodos para enriquecer la disposición visual del contenido, entre ellas la aplicación de transparencias. Aunque el manejo de las transparencias aun no es igual en todos los navegadores por lo cual incluiremos los métodos para obtener la máxima compatibilidad.

Como utilizar los estilos
Si queremos compatibilidad con todos los navegadores, incluso con las versiones antiguas de Mozilla (Netscape Navigator) o versiones anteriores de Safari la forma sería:

.alpha {
	opacity: 0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
}

Donde se tiene que opacity es el más importantes pues es compatible con el actual estándar de CSS, filter es utilizado para Internet Explorer, -moz-opacity para versiones antiguas de Mozilla y -khtml-opacity para versiones anteriores a Safari 1.x.

Ahora este código lo podemos resumir obviando las versiones antiguas de Mozilla y Safari, con lo cual tendríamos.

.alpha {
	opacity: 0.5;
	filter:alpha(opacity=50);
}

Ejemplo: imágenes Transparentes
Lo primero que hacemos es crear dos estilos uno para aplicar 75% y 25% de transparencia.

.alpha75 {
	opacity: 0.75;
	filter:alpha(opacity=75);
}
.alpha25 {
	opacity: 0.25;
	filter:alpha(opacity=25);
}

Ahora incluimos las imágenes y le aplicamos los estilos recién creados.

<div>
	<img loading="lazy" src="iphone.jpg" width="48" height="108" />
</div>
<div class="alpha75">
	<img loading="lazy" src="iphone.jpg" width="48" height="108" />
</div>
<div class="alpha25">
	<img loading="lazy" src="iphone.jpg" width="48" height="108" />
</div>

Con lo cual obtenemos el resultado mostrado en img-alpha.html

Ejemplo: Fondo transparente
El siguiente ejemplo consiste en colocar una imágen como fondo y sobre el crear un bloque de texto que tenga transparencia.

.bg {
	width: 420px;
	height: 284px;
	background: url(imgbg.jpg);
}
.trans {
	background-color: #FFFFFF;
	opacity: 0.5;
	filter:alpha(opacity=50);
	margin: 16px;
	width: 250px;
	border: solid 2px #FFFFFF;
}
.trans p {
	margin: 5px;
	color: #000000;
}

Luego creamos los elementos html y aplicamos los estilos recién creados, nótese que el estilo que tiene la transparencia es llamado .trans y los elementos dentro del mismo heredarán la transparencia.

<div class="bg">
	<div class="trans">
		<p>Lorem ipsum dolor sit amet, consectetuer
		adipiscing elit. Donec odio. Quisque volutpat
		mattis eros. Nullam malesuada erat ut turpis.
		Suspendisse urna nibh, viverra non, semper
		suscipit, posuere a, pede.</p>
	</div>
</div>

Este ejemplo lo podemos ver funcionando en bg-alpha.html. Como pueden ver es sencillo de implementar y con un resultado muy vistoso.

Posts Relacionados

• Controlar el redimensionado de textarea con CSS
• Centrar contenido con CSS
• CSS Impress
• BlueTripCSS Framework
• Números Aleatorios en PHP