Efecto de transparencia en imágenes con CSS

Mediante css podemos lograr efectos de varias escalas de transparencia generando logrados efectos visuales.

Mozilla Firefox 3.5 a incorporado la propiedad estandar del CSS3 OPACITY, dejando de lado (-moz-opacity:), asi tambien versiones recientes de Safari y Opera

Si su navegador soporta la propiedad estandar CSS3 veremos el grado de transparencias:

Si su navegador no soporta la propiedad CSS3 aqui tenemos un gráfico de como se veria:

.transparente {opacity:0.2;}

La opacidad será aplicado a través del rango:

• 0,0 (totalmente transparente)
• 1,0 (totalmente opaco)

Agregaremos el atributo class="transparente" a la imágen o elemento que tendra el efecto de transparencia:

<img src="image.jpg" width="10" height="7"
class="transparente" />

Los demás navegadores tienen códigos propietarios no estandar para simular este efecto de transparencia:

• filter:alpha(opacity=50); Para IE
• -moz-opacity:0.5; (versiones antiguas de Mozilla y Netscape)
• -khtml-opacity: 0.5; (versiones antiguas de Safari 1.x)

De manera que, para ver el efecto de transparencia en la mayoria de los navegadores se deveria agregar algo como esto:

.transparente {filter:alpha(opacity=50);-moz-opacity:0.5;
-khtml-opacity: 0.5;opacity: 0.5;}

Personalmente no recomiendo usar código propietario no estandar, principalmente si necesitas validar tu CSS.