Esto es aprueba de navegadores, pero estarias sacrificando que tu hoja de estilos sea valida, esta claro ?
Cita: 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:
Código:
#elementotransparente {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
Y utilizando comentario condicional para IE (recomendable):
Código:
<style type=“text/css”>
#elementotransparente { opacity: 0.4; -moz-opacity: 0.4; }
</style>
<!—[if IE]>
<style type=“text/css”> #elementotransparente { filter: alpha(opacity=40); }
</style>
<![endif]—>
Informacion mas apliada aqui:
http://www.csslab.cl/2007/01/24/tran...de-browsers-2/
Espero haberte ayudado.