Hasta no hace poco, para lograr transparencias en imágenes para web, el método era exclusivamente hacerlo con un SWF. Con la masificación del PNG, esto se ha hecho más fácil y el resultado es bastante satisfactorio (no como esos horrendos bordes dentados de los eternos GIF), pero lo complementaremos bastante con el uso de CSS.

Propiedades del browser⌗

Cada browser tiene su propio método de aplicar opacidad a las imágenes. CSS ha implementado 3 diferentes propiedades que afectan la transparencia de un elemento:

  • opacity: con valores decimales entre 0 (invisible) y 1 (sólido). (CSS3)
    • moz-opacity: también con valores decimales entre 0 y 1. (Firefox)
    • filter: es una propiedad de IE (5.5+) el cual trae varios efectos (degradaciones, desenfocado, sombras, etc). Para lograr la transparencia se ocupa el filtro alpha, con valores entre 0 y 100.

Al declarar las 3 propiedades juntas mediante CSS y con el mismo valor de opacidad, podrás tener una transparencia a prueba de browsers:

#elementotransparente {
     opacity: 0.4;
     -moz-opacity: 0.4;
     filter: alpha(opacity=40);
}

Y utilizando comentario condicional para IE (recomendable):



     

Ver ejemplo

La transparencia la puedes aplicar en bloques (un div por ejemplo) o a elementos individuales (imágenes, textos). Importante es considerar el nivel de lectura, si quieres darle transparencia a bloques de texto, por ejemplo. Por último, ninguno de estas 3 propiedades validarán por la W3C. Depende de tí si es importante que tu hoja de estilos valide.

Probado en: Safari, IE6, IE7, Opera9, FF 1.5.3+