Foros del Web » Creando para Internet » Diseño web »

Degradado PNG sobre imagen de fondo en IE

Estas en el tema de Degradado PNG sobre imagen de fondo en IE en el foro de Diseño web en Foros del Web. Estoy tratando de hacer un efecto de degradado, de blanco a transparente, sobre una imagen de fondo. Tengo: - 1 tabla con una foto en ...
  #1 (permalink)  
Antiguo 25/04/2006, 11:44
Avatar de sty
sty
 
Fecha de Ingreso: octubre-2003
Mensajes: 116
Antigüedad: 12 años, 11 meses
Puntos: 1
Mensaje Degradado PNG sobre imagen de fondo en IE

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!
  #2 (permalink)  
Antiguo 25/04/2006, 12:20
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 12 años, 6 meses
Puntos: 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.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #3 (permalink)  
Antiguo 25/04/2006, 13:26
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 14 años, 7 meses
Puntos: 995
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #4 (permalink)  
Antiguo 25/04/2006, 14:28
Avatar de sty
sty
 
Fecha de Ingreso: octubre-2003
Mensajes: 116
Antigüedad: 12 años, 11 meses
Puntos: 1
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.

  #5 (permalink)  
Antiguo 25/04/2006, 14:34
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 12 años, 6 meses
Puntos: 20
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.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #6 (permalink)  
Antiguo 25/04/2006, 16:45
 
Fecha de Ingreso: abril-2006
Ubicación: Lima
Mensajes: 16
Antigüedad: 10 años, 5 meses
Puntos: 0
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.
  #7 (permalink)  
Antiguo 26/04/2006, 08:35
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 14 años, 9 meses
Puntos: 16
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]-->
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO
  #8 (permalink)  
Antiguo 26/04/2006, 09:24
Avatar de sty
sty
 
Fecha de Ingreso: octubre-2003
Mensajes: 116
Antigüedad: 12 años, 11 meses
Puntos: 1
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...
  #9 (permalink)  
Antiguo 26/04/2006, 09:45
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 14 años, 9 meses
Puntos: 16
no entendi, tienes 2 fondos? ya me perdi
  #10 (permalink)  
Antiguo 26/04/2006, 10:15
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 15 años, 7 meses
Puntos: 535
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.
__________________
...___...
  #11 (permalink)  
Antiguo 26/04/2006, 10:21
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 14 años, 9 meses
Puntos: 16
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
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO
  #12 (permalink)  
Antiguo 26/04/2006, 10:25
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 15 años, 7 meses
Puntos: 535
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>
__________________
...___...
  #13 (permalink)  
Antiguo 26/04/2006, 16:30
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 14 años, 9 meses
Puntos: 16
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
__________________
CreandoWebs.com
www.creandowebs.com
PLANTILLAS TEMPLATEMONSTER CON 10% DE DESCUENTO
  #14 (permalink)  
Antiguo 27/04/2006, 05:41
Avatar de sty
sty
 
Fecha de Ingreso: octubre-2003
Mensajes: 116
Antigüedad: 12 años, 11 meses
Puntos: 1
Poniento el id="fondo" en el TD funciona todo correcto, tanto en IE como en Firefox.

Sjam7 Gracias crack!
  #15 (permalink)  
Antiguo 30/04/2006, 08:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 13 años, 10 meses
Puntos: 317
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.
  #16 (permalink)  
Antiguo 30/04/2006, 08:49
Avatar de sty
sty
 
Fecha de Ingreso: octubre-2003
Mensajes: 116
Antigüedad: 12 años, 11 meses
Puntos: 1
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 ;)
  #17 (permalink)  
Antiguo 25/05/2006, 18:05
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 14 años, 9 meses
Puntos: 16
seria bueno limpiar este post y que quedara en las FAQ's, a mas de uno podria servirle
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 04:40.