Degradado PNG sobre imagen de fondo en IE

sty · #1 (**permalink**) 25/04/2006, 11:44

Estoy tratando de hacer un efecto de degradado, de blanco a transparente, sobre una imagen de fondo.

Tengo:

- 1 tabla con una foto en el fondo.
- otra tabla dentro de la anterior y con las mismas medidas, con la imagen png del degradado.
- otra tabla dentro de la anterior, que no tiene nada que ver, con texto, que se ve mejor con el degradado anterior, para eso está.

En Firefox, sin problemas, en Internet Explorer sale todo el fondo blanco.

Alguna ayuda? Gracias!

K3NNY · #2 (**permalink**) 25/04/2006, 12:20

Internet Explorer no soporta los PNGs con canal alpha (transparencias), asi que estas hasta las b... Podes hacer 3 cosas:

1). Esperar a que salga Internet Explorer 7 (que si sporta PNGs con canal alpha) y se vuelva masivo.
2). Intentar usar los cientos de hacks que ocupan lineas y lineas de codigo (haciendo mas pesada la pagina) y rogar porque alguno funcione bien.
3). Usar comentarios condicionales para que los usuarios de IE vean otra imagen en vez del PNG, como un degradado GIF (horrible) o que directamente no muestre imagen.

webosiris · #3 (**permalink**) 25/04/2006, 13:26

4) Dejarla así como está y poner una aviso a los que entran con IE (una forma es hacerlo con comentarios condicionales) diciendo que su navegador es malo y que se cambien a uno mejor

sty · #4 (**permalink**) 25/04/2006, 14:28

Gracias a ambos.

En ese caso, me decantaré por una 5ª opción, Flash, aunque también tiene sus pegas para lo que lo quiero, pero creo que será lo mejor.

K3NNY · #5 (**permalink**) 25/04/2006, 14:34

Flash, aaaargh. No termine de entender del todo lo que queres lograr, no tenes una pagina online de prueba donde podamos ver lo que queres lograr? A lo mejor alguien conoce una mejor manera de lograrlo. Te digo esto porque si estas usando tablas de layout (lo que es peor, tablas anidadas) a lo mejor se podria conseguir el mismo efecto usando CSS y mucho mas simple.

Forastero76 · #6 (**permalink**) 25/04/2006, 16:45

Cita:

Iniciado por K3NNY

Flash, aaaargh. No termine de entender del todo lo que queres lograr, no tenes una pagina online de prueba donde podamos ver lo que queres lograr? A lo mejor alguien conoce una mejor manera de lograrlo. Te digo esto porque si estas usando tablas de layout (lo que es peor, tablas anidadas) a lo mejor se podria conseguir el mismo efecto usando CSS y mucho mas simple.

Un relleno degradado con CSS? que interesante, me gustarìa saber como se hace, yo tengo instalado el WAMP en mi computadora y algunas tablas aparecen con las celdas de los titulos con un fondo degradado, no se como se hace, si sabes te agradecerìa lo expongas.

sjam7 · #7 (**permalink**) 26/04/2006, 08:35

pega esto entre las etiquetas <head></head> a ver si se ve bien:

Código:

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle        
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

sty · #8 (**permalink**) 26/04/2006, 09:24

Muy bueno eso último, me funciona si la imagen PNG es una imagen sobre una tabla que tiene como fondo la foto, pero no si ambos son fondos como es el caso...

sjam7 · #9 (**permalink**) 26/04/2006, 09:45

no entendi, tienes 2 fondos? ya me perdi

AlZuwaga · #10 (**permalink**) 26/04/2006, 10:15

Se refiere a que ese "hack" de transparencia para los PNG sólo sirve si la imagen está... "como imagen", osea, dentro de un tag <img>
Si es una imagen de fondo, ese script no sirve.

sjam7 · #11 (**permalink**) 26/04/2006, 10:21

entonces seria cosa de colocar la imagen de fondo con css y tratar de sacar del script el css, que a final de cuentas es lo que usa para que funcione la transparencia, voy a intentar hacerlo y les cuento

AlZuwaga · #12 (**permalink**) 26/04/2006, 10:25

Busqué una solución así pero no la encontré. Sería interesante!
Métale mano sjam ;)

EDIT: Pero... en ese caso, el css debería estar "embebido" en el tag.. ¿no?
Digo, aslgo así:

<table>
<tr>
<td style="background-i9mage...."></td>
</tr>
</table>

sjam7 · #13 (**permalink**) 26/04/2006, 16:30

Bueno hice algo que seria "manual" lo de la transparencia algo asi
el ejemplo se puede ver aqui: www.cristovivo.com/prueba.html

se pone este css:

Código:

<style type="text/css">
<!--
#fondo {
    background-image:url(logoGDE.png)
}
* html #fondo {background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logoGDE.png', sizingMethod='crop')    
    background:;
}

-->
</style>

* html Esto hace que se ponga un fondo para unos navegadores y ese mismo con un filtro al IE

En la tabla se pone id="fondo" yo lo puse en una tabla, si se pone en la etiqueta <table> y la tabla tiene bordes sobrepondra la imagen a los bordes, si se pone en el <td> no.

Espero sirva por lo menos para empezar algo mejor hecho

sty · #14 (**permalink**) 27/04/2006, 05:41

Poniento el id="fondo" en el TD funciona todo correcto, tanto en IE como en Firefox.

Sjam7

Gracias crack!

furoya · #15 (**permalink**) 30/04/2006, 08:14

Hola todos :

Hay mucho (demasiado) en el Foro sobre el tema de fondos semitransparentes o su versión 'degradada'.
Dejo algunos enlaces

Tablas tranparentes y Contenido 100% Visible

Función "opacity"

IE: png en background

Transparencia compatible para todos los navegadores

Se me ocurre que conviene aclarar que en tu caso, sty, debes tener detrás del degradado alguna otra imagen con diseño, ya que si fuese un color parejo o hasta un mosaico alcanzaría con un *.jpg con degradé blanco hasta el color de fondo, y no hace falta un *.png.

saludos.

sty · #16 (**permalink**) 30/04/2006, 08:49

Cita:

Iniciado por furoya

Hola todos :

Hay mucho (demasiado) en el Foro sobre el tema de fondos semitransparentes o su versión 'degradada'.
Dejo algunos enlaces

Tablas tranparentes y Contenido 100% Visible

Función "opacity"

IE: png en background

Transparencia compatible para todos los navegadores

Se me ocurre que conviene aclarar que en tu caso, sty, debes tener detrás del degradado alguna otra imagen con diseño, ya que si fuese un color parejo o hasta un mosaico alcanzaría con un *.jpg con degradé blanco hasta el color de fondo, y no hace falta un *.png.

saludos.

Es un JPG lo que hay debajo, y ya conseguí que funcionara, gracias de todas formas ;)

sjam7 · #17 (**permalink**) 25/05/2006, 18:05

seria bueno limpiar este post y que quedara en las FAQ's, a mas de uno podria servirle