capa con fondo transparente o traslúcido

[susaninhax]

Buenas compañeros;

No estoy muy segura de que se pueda hacer, me gustaría hacer que una capa tubiese un background transparente o mas bien traslúcido, es decir, que tenga algo de color pero que transparente la imagen de una capa anterior. Sé que con Opacity se puede, pero la fórmula que uso yo no vale para todos los navegadores solo para el explorer. Alguien sabe alguna fórmula para poner un background traslúcido o transparente y que se vea en todos los navegadores, opera, firefox, ie, etc...

Muchas gracias de antemano a todos!!

[fearlex]

Esto es aprueba de navegadores, pero estarias sacrificando que tu hoja de estilos sea valida, esta claro ?

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.