Foros del Web » Creando para Internet » CSS »

capa con fondo transparente o traslúcido

Estas en el tema de capa con fondo transparente o traslúcido en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 01/08/2007, 05:54
Avatar de susaninhax  
Fecha de Ingreso: noviembre-2004
Mensajes: 358
Antigüedad: 13 años, 1 mes
Puntos: 3
capa con fondo transparente o traslúcido

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!!
  #2 (permalink)  
Antiguo 01/08/2007, 10:09
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: capa con fondo transparente o traslúcido

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.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:27.