PNG, transparencias e IE . Lo de siempre.

[CHuLoSoY]

Hola amigos.

Qué pasa con Internet explorer, que es una basura con los png o las transparencias?
mi problema es que necesito un fondo con degradado png. Para que el degradado se vea tengo que hacer esto:

Código CSS:

div#contenido {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/deg-cont.png', sizingMethod='crop') ;
}
 

Perfecto, pero el problema es que necesito que toda la capa tenga opacidad 0.9. En los otros navegadores lo consigo, pero no logro combinar los dos filtros para Ie .

Código CSS:

div#contenido {
filter: alpha(opacity=90)  , progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/deg-cont.png', sizingMethod='crop') ;
}
 

Ponga como ponga los filtros, no me muestra el png con transparencia, sino todo en negro con opacidad al 90

¿Cómo puedo hacer para combinar tanto el progid como el alpha?

Gracias y un saludo,

[Naahuel]

¿Te referís a IE6? IE7 soporta transparencia sin problemas.
Para IE6 he usado esto y funciona hermosamente:
http://jquery.andreaseberhard.de/pngFix/

Es fácil de aplicar, soporta PNG32 tanto como imagen <img> o como fondo. No soporta sprites (varias imagenes en una sola posicionadas con CSS).

[CHuLoSoY]

Si claro, IE7 soporta lo que le sale del ...... básicamente
Estoy con IE8 y nada, sólo con IE9, con menores no va. puedes verlo:

http://83.165.41.6/Proyectos Gallaenet/marina

Lo que necesito es que haga el mismo efecto que si lo ves con firefox por ejemplo o google chrome, o konqueror o cualquiera que no sea Ie.

Necesito el degradado del centro que lo soluciono perfectamente con el primer código, pero también necesito que ese conjunto tenga opacidad del 90% y si le añado el alpha, ya no reproduce el anterior progid. ¿Me explico mejor?


EDITO:
He probado con el plugin de jquery que me has referenciado y no funciona, es más, me pone toda la capa transparente del todo, se ve el texto encima de las fotos sin más.
Internet explorer es un rompedero de cabezas.

[Naahuel]

Entiendo tu dilema. Pregunta: ¿Por qué la opacidad de 90% no se la aplicas directamente al png?

Bueno a ver. Te digo lo que hice:
http://nahueljose.com.ar/transparencia-png/

Le apliqué la opacidad directamente al PNG, así matamos todos los pájaros de un tiro. Espero no cause conflictos con otra cosa. Saqué la opacidad de CSS para todos los navegadores.

Quité el script que "repara" la transparencia en IE pues es lo que hacía que no se viera la transparencia (irónicamente) y le apliqué el PNGFix().

NO SÉ qué pasa que en IE6 directamente no me muestra nada, te dejo esa tarea a vos.
Creo que lo más simple es usar directamente un PNG con opacidad 90%. El pngfix SI puede repararlo, lo he comprobado. Pero no lo apliqué bien o me perdí en algún lado.

Acá está todo comprimido, podés usar el PNG que te preparé desde ahí:
http://nahueljose.com.ar/transparencia-png/transparencia-png.zip

Espero te sirva :P

-edit-
Como ejemplo te dejo un sitio que programé hace poquito:
http://gardenplanning.com.ar/
Miralo en IE6 y sorprendete con las transparencias de PNG32 y las sombras de los textos ;)

[Naahuel]

Bueno vuelvo a postear porque ya descubrí el asunto.
Tienes errores con la codificación. Si usás caracteres como Ñ, Á, etc, necesitás reemplazarlas por sus equivalentes entidades html: &ntilde; &aacute; etc. El título con la ñ hacía que no se muestre en IE6 nada!

Bueno acá podés ver el sitio completo:
http://nahueljose.com.ar/transparencia-png

Verás que en IE6 se ve perfecto.
Acá lo podés bajar:

http://nahueljose.com.ar/transparencia-png/transparencia-png.zip

[CHuLoSoY]

eso es como lo tenía, con el png y su transparencia, pero el tema era poner todo el contenido de la capa transparente. así que me tocará ponerle transparencia elemento a elemento, vaya movida.

gracias por tu interés de todas formas.

Un saludo!

[Naahuel]

Honestamente no entiendo cual es la complicación. Las dos cosas que tenés que hacer son:

1- Olvidarte de complicarte la vida con filtros para IE. IE7 en adelante soporta transparencia en PNG32 y la opacidad y degradados se ven perfecto. En todos los demás navegadores lo mismo. Entonces conviene 1000 veces usar la opacidad en el PNG y no complicarse con CSS y filtros complicados.

2- Usar pngfix() para IE6.

Si te fijas en el post anterior te puse un link para que veas que funciona a la perfección.

Si el problema viene por otra complicación, me gustaría saber cuál es.

Un saludo!

[CHuLoSoY]

Ñ ?? Pero si le tengo la codificación a utf-8 igual que como guardé el fichero.... !!!

qué sucede? Ves como IE es una basura? jajajaja

se nota que no uso windows eh?
Pues eso, lo que te muestro es una idea, no es una página. Lo que necesito es que toda la capa de contenido semitransparente tenga sus elementos hijos con la misma opacidad.
Pero dado este problema , pondré inherit los opacity, y filtros de IE al menos el alpha(opacity) tengo que usarlo (y este por lo menos funciona bien)

SAludos.

[mdk]

Pégale un vistazo a esta web. http://www.dillerdesign.com/experiment/DD_belatedPNG/

Saludos.

[Mr_Raymon]

Iniciado por mdk

Pégale un vistazo a esta web. http://www.dillerdesign.com/experiment/DD_belatedPNG/

Saludos.

Yo tambien iba a recomendar este mismo plugin pero creo que solo vale para IE6.

Saludos.

[alexk]

Iniciado por Mr_Raymon

Yo tambien iba a recomendar este mismo plugin pero creo que solo vale para IE6.

Saludos.

que otro navegador necesita soporte para PNG?...

[Mr_Raymon]

Iniciado por alexk

que otro navegador necesita soporte para PNG?...

Basicamente desde el IE6 hasta el 8. De hecho CHuLoSoY tiene razon en que Internet Explorer no muestra bien las transparencias de los PNGs. Incluso pensaba que en la version 7 ya estaba corregido pero visite la pagina que puso con IETester y ocurre eso mismo.

[mdk]

Iniciado por Mr_Raymon

Yo tambien iba a recomendar este mismo plugin pero creo que solo vale para IE6.

Saludos.

A mí con el plugin ese, me va en todas las versiones de IE a partir de la 6.

[saul123]

Hola Aa todo

he estado leyendo y lo mejor que me parecio fue esta pagina , echarle un vistazo

http://www.anieto2k.com/2006/08/28/png-internet-explorer-soluciones-varias/

[alexk]

Iniciado por Mr_Raymon

Basicamente desde el IE6 hasta el 8. De hecho CHuLoSoY tiene razon en que Internet Explorer no muestra bien las transparencias de los PNGs. Incluso pensaba que en la version 7 ya estaba corregido pero visite la pagina que puso con IETester y ocurre eso mismo.

IEtester es solo un emulador... solo IE6 necesita correccion para los PNG... para testear sitios en este navegador, es mejor usar el navegador nativo y en XP... ya que los que realmente usan IE6... no usan IEtester para navegar :S

Lo que brinda mdk (#9) es la mejor solucion hasta ahora...

[Mr_Raymon]

Iniciado por mdk

A mí con el plugin ese, me va en todas las versiones de IE a partir de la 6.

Segun la web del creador del plugin pone que es para IE6 pero si de verdad funciona para los siguientes navegadores, mejor que mejor.

Iniciado por alexk

IEtester es solo un emulador... solo IE6 necesita correccion para los PNG... para testear sitios en este navegador, es mejor usar el navegador nativo y en XP... ya que los que realmente usan IE6... no usan IEtester para navegar :S

alexk, ya me gustaria a mi tener disponible los Internet Explorer sin tener que utilizar un emulador (IETester o MultipleIEs por poner algunos ejemplos) pero tengo Windows 7 y es una herramienta muy util aunque falla lo suyo. La unica forma de probarlo en mi propio ordenador seria instalar Windows XP mediante Virtualbox o probarlo directamente en un ordenador con XP (lo cual no esta a mi alcance :/).

Saludos.

[Tecna]

Buenas,

para solucionar el problema de las transparencias en IE6 una buena solución es un script de Turnbull Angus con licencia GNU LGPL llamado IEPNGFix 2.0 y que se puede bajar de su web aquí. Soporta imágenes de fondo, sprites, background-repeat, onclick, multiples selectores y no necesita tener javascript activado (para algunas cosas si), además es bastante rápido. Se basa en la propiedad css propietaria behavior que se puede incluir dentro de un comentario condicional y asi el código seguirá validando.

De la experiencia que he tenido (con el 7 no he probado pero con el 6 y el 8 si) en IE8 es verdad que en principio se mostraban bien las transparencias, pero al mezclarlo con la opacidad dejaban de verse bien, sin embargo en el 6 aunque necesita el parche para las transparencias y para la opacidad hay que usar un filtro diferente que el que se usa para el 8, el resultado era bueno y si que combinaba bien opacidad con transparencia png.

Así que hay que dar mil vueltas y romperse la cabeza para obtener un resultado medianamente aceptable y me temo que seguirá siendo asi. A veces no se puede aplicar la opacidad a la imagen directamente cuando lo que se quiere es un cambio de opacidad gradual y es mas fácil modificar un valor de una propiedad css que tener que retocar una imagen si decidimos cambiar el diseño aunque muchas veces no queda mas remedio que buscar soluciones ingeniosas siempre obligados por las carencias o particularidades de nuestro querido ie

[CHuLoSoY]

Iniciado por alexk

IEtester es solo un emulador... solo IE6 necesita correccion para los PNG...

que no hombre, que esto es una patraña que te cuentan. En cuanto le metes un efectillo o cualquier cosa pierde la capa alpha de transparencia y volvemos a la misma, en IE 8 e incluso en IE 9 .Que es una vergüenza de navegador lo sabemos todos. El porqué co***** se sigue usando en masa sólo lo entiende mocosoft.

mi única solución que veo es no aplicar el fade in/fade out en las secciones para que muestre la imagen y listo, pero sin efecto transitorio es un salto muy brusco.

La solución de http://www.twinhelix.com está muy bien, pero realmente es igual que el resto, no ofrece soporte para animaciones. Esto sólo está en manos de microsoft. .. nos obliga a utilizar flash player para realizar diseños bonitos de páginas web, el cual es otra vergüenza inestable·

un saludo y gracias a todos por el interés.

PD: Creéis que mi solución real es quitar el efecto de transición en IE?