Transparecia PNG de fondo.

DragonX · #1 (**permalink**) 26/08/2007, 10:06

Hola amigos! aca de nuevo con otro problemita.... estoy armando un site donde tengo una imagen de fondo y necesito poner un contenedor general con otra imagen de fondo, pero esta debe ser un PNG transparente....

en la hoja de estilos tengo esto:

Código HTML:

#contenedorgral{ 
width: 775px; 
background-image: url(img/fondo_contenedor-gral.png) !important;
background-image:none;
filter:none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/fondo_contenedor-gral.png);
}

y en el HTML, esto otro:

Código HTML:

 <body>
   <div id="contenedorgral"></div> 
  </body>

Aparentemente por lo que estuve investigando, con esto basta....pero aca esta el tema, en IE anda pefectamente, mientras que en FireFox no me muestra la imagen de fondo....¿cómo soluciono esto?

Mil gracias!!!
DX

pzin · #2 (**permalink**) 26/08/2007, 10:12

¿Has probado a quitar background-image:none;? Es que una cosa contradice a la otra, y supongo que por ahí vendrá el problema con Firefox.
Dado que el filtro solo es para IE, también podrías ponerlos con hacks. Algo así:

Código:

/* hack-ie6 */
* html #contenedorgral {
elfilto
}
/* hack-ie7 */
*:first-child+html #contenedorgral {
elfiltro
}

Los pongo por separado para que se vea mas claro.

DragonX · #3 (**permalink**) 26/08/2007, 10:59

lo voy a probar...

Nono Martínez · #4 (**permalink**) 27/08/2007, 17:03

Cita:

filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src=img/fondo_contenedor-gral.png);

Estas usando un filtro especial de Internet Explorer , lo normal es que no funcione en Mozilla (digo lo normal porque hay cosas especiales de IE que Mozilla está metiendo en sus especificaciones).

Con Mozilla pasa igual.

Los PNG solo se pueden poner transparentes con IE7 y Mozilla, pero no con IE6, para este ultimo hay que usar javascript o algun filtro especial de Internet Explorer. Con tu metodo puedes hacer que se condicione dentro del archivo CSS con un IF si es IE6 y que aplique ese filtro. En caso contrario que no se aplique nada. Tambien supongo que puedes programar este procedimiento con Javascript.

Busca informacion en google.

Nono Martínez · #5 (**permalink**) 27/08/2007, 17:05

Seguro que esto te ayuda un poco más

http://www.mandarindesign.com/opacity.html

Voilá