Lo de hacer un elemento semitransparente es relativamente fácil: sólo se trata de añadirle un atributo que indica tal cosa. Los problemas empiezan cuando encontramos que la transparencia es tratada por cada navegador de una manera distinta. Y ya no me refiero a diferencias entre Firefox, Internet Explorer, Opera, Chrome, Safari... si no que hay diferencias de interpretación incluso entre versiones.

En realidad, deberíamos hablar más bien de opacidad, porque así es como lo tratan la mayoría de navegadores. Podemos definir una opacidad del 100% para figuras totalmente opacas u otro valor inferior para distintos grados de imágenes traslúcidas. Olvidaros del 0% porque para ponerlo transparente del todo creo que mejor no lo ponemos ;)

Los distintos códigos que conozco en versión CSS son:

• Internet Explorer --> filter:alpha(opacity=100);
  
• Internet Explorer 8 -->
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
• Firefox, Netscape, Mozilla --> -moz-opacity:0.1;
• Opera, Safari, Chrome --> opacity: 0.1;
• Khtml --> -khtml-opacity: 0.1;

IE fija la opacidad desde 0 (totalmente transparente) hasta 100 (totalmente opaco). El resto respectivamente entre 0 y 1. Para IE 6 no conozco ningún atributo que funcione.

Así las cosas y para evitar problemas, lo mejor que no lo más práctico, será añadir a nuestra etiqueta STYLE, todos los códigos conocidos:


Todavía no he aprendido el orden exacto en que hay que redactar códigos para distintos navegadores, pero en este caso, el código de IE8 debe ir obligatoriamente delante del de los otros IE, así que ojito con cambiarlos de orden. Si alguien conoce otros atributos que sean comunes a más navegadores u otra forma de ordenarlos para optimizar el resultado, sería eternamente agasajado.

Cuando vayamos a utilizar con cierta frecuencia el efecto de transparencia, lo más cómodo será crear una clase... o varias:



Luego sólo habría que aplicar la clase deseada al elemento que queramos: DIV, IMG, LI,... Por ejemplo:




Por último otra manera algo más farragosa cuando hay que usarla para muchos elementos, pero que no falla con ningún navegador: con eventos Javascript. Así de paso le metemos un fácil rollover.