Alpha Opacity : transparencia con CSS
Veamos un pequeño ejemplo del atributo Alpha u Opacity de CSS que nos permite hacer que cualquier objeto de nuestra web, tenga un nivel de transparencia (del 1 al 100%) que nosotros queramos.
Aunque no es muy recomendado, hay aún desarrolladores que utilizan transparencias. Y no me refiero a programar con ropa interior provocativa. Me refiero a que un elemento, por ejemplo un <div> o una <img> de nuestra web tenga un % de transparencia.
Para que una capa o elemento de nuestra web tenga transparencia, deberemos formar su descripción en la hoja de estilos asignándole unos atributos específicos. Pongamos un ejemplo:
Tenemos una capa y queremos que tenga un color rojo, pero que transparente lo que tiene debajo.
// Declaramos la capa en nuestra página
<div class="alpha50">Contenido</div>Y ahora declaramos en nuestra hoja de estilos el elemento, y le aplicamos la transparencia con los atributos Filter, opacity y -moz-opacity. No es que necesitemos los 3 para aplicar la transparencia. Cada uno de ellos, es para que se aplique en los diferentes navegadores (Chrome, Firefox, IExplorer..)
// En nuestra hoja de estilo css tendremos
.alpha50 {
filter: alpha(opacity=50); // Para IExplorer
opacity: .5; // Para Firefox
-moz-opacity:0.5; // Para Mozilla
}
Los tres valores hacen el mismo efecto, pero para diferentes navegadores.
Con esta simple definición, puedes jugar desde 0.1 a 1.0 el nivel de transparencia. Es sencillo con los atributos Alpha y Opacity de CSS conseguir transparencia en nuestra web.
Más información