Transparencia con CSS

07/12/2008
3:16 pm
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 src="iphone.jpg" width="48" height="108" />
</div>
<div class="alpha75">
<img src="iphone.jpg" width="48" height="108" />
</div>
<div class="alpha25">
<img 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.