Transparencia con hojas de estilo CSS

Lograr una transparencia al diseñar webs es al día de hoy un requisito. Los navegadores modernos brindan más de una posibilidad; presentaremos en este artículo la forma con hojas de estilo CSS.

La primera aproximación a la transparencia la constituyó el formato de archivos .gif. Si bien abrió un nuevo campo en el diseño, tuvo una importante limitación: un pixel podía ser de color o totalmente transparente pero no tener grados intermedios de opacidad. Surgió tiempo después, para salvar ese impedimento, el formato de archivos .png con su canal alfa (canal de transparencia). Hoy por hoy es uno de los formatos de imágenes más comunes en la web -lamentablemente el Internet Explorer 6 no lo soporta y el workarround no es efectivo.

Una posibilidad más moderna -y por lo tanto no soportada en navegadores viejos- son las hojas de estilo CSS. A diferencia de las imágenes .png, podemos transparentar colores de fondo, imágenes (de cualquier formato) y texto. Además, se vuelve extremadamente sencillo variar la transparencia desde Javascript.

El atributo que debemos agregar se llama opacity y varía entre 0 (imágen transparente) y 1 (imágen opaca). Para los valores decimales utilizamos el “.” (punto), por ejemplo: 0.5.

#prueba{
opacity: 0.5;
}

Al igual que los demás atributos CSS, se hereda a todos los bloques contenidos dentro. Por esta razón, una vez que se hace transparente el bloque de más arriba, los de abajo no podrán nunca llegar al máximo de opacidad -digamos que es progresivo.

Google Chrome 1.0 no está aceptando este atributo cuando se aplica a una imágen con transparencia alfa.