Problema con png con transparencia como fondo de tabla

elias77 · #1 (**permalink**) 15/08/2007, 19:48

Holas como andan, tengo un problema, uso un png con transparencia como imagen de fondo de una tabla, el problema es que IE 6 o inferior no soporta canales alpha... e probado montones de formas de visualizarlo bien en IE 6 pero todos los ejemplos que probe solo funcionan como una imagen insertada comun.....sea en una tabla o no...pero ninguno funciona con imagenes con alpha como fondo de tablas....asi que si me pueden ayudar se los agradecere mucho.

PatomaS · #2 (**permalink**) 15/08/2007, 19:51

Hola

No se que imagen es, que transparencias tiene ni nada por el estilo. Pero la opción estandar es que uses gif si es posible.

Otra opción es que uses un diseño para los navegadores que soportan los png transparentes y otro diseño para los que no. Aunque sea un fondo plano y poco más.

Felicidad

kaninox · #3 (**permalink**) 15/08/2007, 20:17

como dice patomas usa gif, ya que IE 6 e infeririores no soportan imagenes en .png solo esto se viene a tomar en cuenta a partir de su version 7 y aun no lo soporta como debe ser...

bookmaster · #4 (**permalink**) 17/08/2007, 08:34

Echale un ojo a esto

http://www.forosdelweb.com/f6/tipografia-transparencia-445102/

No se si te ayudara en lo que intentas hacer...

fer10 · #5 (**permalink**) 17/08/2007, 10:49

Para mi es mas facil usar estilos, asi no complico el codigo con js

http://www.cristalab.com/foros/t21618.html

aun que no es estandar.. pero =) queda mas limpio el codigo..

bookmaster · #6 (**permalink**) 17/08/2007, 13:28

La diferencia de lo que tu pones el JA que puse yo es la siguiente.

En tu caso tienes que poner eso 1 vez por cada imagen en PNG que pongas en la web.

Pero con el JS basta con hacer un <script language="Javascript" src="png.js"></script> en el <head></head> y ya puedes poner toda la página llena de archivos en PNG si quieres, porque no necesitaras darle el Stylo a cada imagen.

Ventajas Imaginate una página llena de PNG como por ejemplo http://www.lineage2.com si tienen que definirle los CSS imagen a imagen.

elias77 · #7 (**permalink**) 17/08/2007, 17:52

Cita:

Iniciado por PatomaS

Hola

No se que imagen es, que transparencias tiene ni nada por el estilo. Pero la opción estandar es que uses gif si es posible.

Otra opción es que uses un diseño para los navegadores que soportan los png transparentes y otro diseño para los que no. Aunque sea un fondo plano y poco más.

Felicidad

Como creas un GIF transparente? Porque cree una imagen en Photoshop, no tiene degradados, solamente es un rectangulo color negro con transparencia de 60% pero si lo guardo como GIF no me toma la transparencia, solo los PNG. Intente muchas formas pero en formato GIF no me toma la transparenia.

bookmaster · #8 (**permalink**) 18/08/2007, 03:37

Los gif no admiten degradados, solo admiten la transparencia 100% para que te hagas una idea, o hay color o no hay color, no admite mas, sin en cambio los PNG si que admiten transparencias en los colores.

Estube mirando el enlace de un poco mas arriba que dejó Fer10, y hay uno de los moensajes contestando, que le responden diciendo que que para un fondo de tabla se cree un Estilo CSS con el valor ese, y en donde quieras ponerle le haces la llamada con CLASS="NombreEstilo".

Aqui te pongo el estracto en el que explica como ponerlo de fondo.

<--------
Imágenes como fondo

El anterior código, funciona muy bien para poner imágenes, pero no para colocar fondos, en realidad colocar fondos es aún más sencillo, necesitaremos crear dos archivos css, una para IE y otro para el resto, por lo tanto debemos modificar un poco el código de detección de IE:

Código :

Código PHP:

  <link href="estilo.css" rel="stylesheet" type="text/css" />

<title>Cualquier título </title>

<!--[if lt IE 7]><script defer type="text/javascript" src="png.js"></script>

<link href="ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

He llamado al archivo ie.css, puedes llamarlo como deseés, este archivo sólo se cargará si se detecta IE como navegador. Pongamos primero el código normal para poner una imagen de fondo en un div que está dentro del archivo estilo.css

Código :

Código PHP:

  #header{  

width: 600px;  

height: 178px;  

background-image:url(fondo.png);  

background-repeat:no-repeat;  

margin-left: 200px;

}

Nada nuevo hasta ahí, ahora veamos mismo código pero dentro del archivo ie.css

Código :

Código PHP:

  #header{  

width: 600px;  

height: 178px;  

background: none; /* Aquí quitamos cualquier fondo existente */  

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="fondo.png", sizingMethod="image"); /*cargamos la imagen igual que como lo hicimos con la etiqueta img, pero el  método de escala será ahora image, es decir, la misma imagen */  

background-repeat:no-repeat;  

margin-left: 200px;

}

------->

Aviso que no lo he probado aún y es raro que yo postee algo sin probarlo antes, espero que te sirva y me pondre a probarlo ahora