La opacidad o, mejor dicho, la posibilidad de crear elementos translúcidos o semi-transparentes, no forma parte por el momento de ninguna especificación CSS (el nivel 3, de próxima aparición, ya la contempla). Por tanto, y a pesar de que algunos navegadores han implementado soluciones propietarias o experimentales (como veremos más adelante), la única opción realmente limpia es aprovechar el canal alpha de los gráficos en formato PNG. Sin embargo no es una solución demasiado rentable, porque la mayoría de los navegadores no lo soportan bien (visita libpng.org para obtener más detalles). A continuación un ejemplo básico, en el que se ha posicionado un gráfico con opacidad variable sobre un fondo normal. Si no puedes vislumbrar el fondo a través del cuadro "test" significa que tu navegador no soporta el canal alpha.
La opción de utilizar CSS sólo funciona en las últimas versiones de Internet Explorer y en los navegadores basados en el núcleo Gecko, como parte del estilo propietario filter y de la colección experimental -moz- (conforme al futuro estándar) respectivamente. Su puesta en práctica es así:
Código CSS:
Selector { -moz-opacity:x; filter:alpha(opacity="x"); }
Donde Selector es el que apunta a los elementos a aplicar, y x el nivel de opacidad. Para Mozilla entre 0 (transparente) y 1 (opaco), y para Internet Explorer entre 0 (transparente) y 100 (opaco). A continuación, unos ensayos básicos:
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Como cualquier otra propiedad CSS, la opacidad puede manipularse a través de un script. La metodología es, lógicamente, diferente para cada navegador:
Código JavaScript (Mozilla):
Elemento.style.MozOpacity = x;
Código JavaScript (Internet Explorer):
Elemento.style.filter = 'alpha(opacity='+x+')';
Donde Elemento es una referencia válida, y x el nivel de opacidad, con las características ya detalladas anteriormente. El siguiente párrafo es una prueba. Acciona el botón para activar o detener el script.
Test
Pero no es necesario complicarse la vida para simular efectos más sencillos. La utilización de motivos de fondo que generen tramas es una salida digna y simple. En el ejemplo siguiente se utilizan tres archivos PNG o GIF de dos colores (uno de ellos transparente), y de dimensiones 2px×2px (ampliados generosamente en las muestras superiores).
75%
50%
25%