¿Cómo hacer que la transparencia PNG funcione en navegadores que no la admiten de forma nativa?

Question

Nuestro (querido) diseñador sigue creando archivos PNG con fondos transparentes para usar en nuestras aplicaciones.Me gustaría asegurarme de que esta característica del PNG también funcione en navegadores "antiguos".¿Cuál es la mejor solución?

ediciones a continuación

@mabwi y @syd: el punto no es si estoy de acuerdo o no con el uso de un PNG.¡Este es un problema que necesito resolver!

@Tim Sullivan: IE7.js se ve muy bien, pero no creo que quiera introducir todos los demás cambios en una aplicación.Me gustaría una solución que solucione el problema de PNG exclusivamente.Gracias por el enlace.

Answer 1

Aquí hay un excelente artículo que explica y muestra cómo manejar la transparencia PNG en navegadores más antiguos: http://www.alistapart.com/stories/pngopacity/

Answer 2

He encontrado lo que parece ser una muy buena solución aquí: Unidad interactiva -> Laboratorios -> Unidad PNG Fix

actualizar La unidad PNG también aparece en un lista de opciones de corrección de PNG en NETTUTS

Aquí están los aspectos más destacados de su sitio web:

• JavaScript muy compacto:¡Menos de 1kb!
• Se corrige algunos problemas de interactividad causados ​​por el atributo de filtro de IE.
• Funciona con objetos img y atributos de imagen de fondo.
• Se ejecuta automáticamente.No tiene que definir clases o funciones de llamadas.
• Permite elementos de ancho y alto automáticos.
• Súper simple de implementar.

Answer 3

• Es decir, PNG Fix 2.0 que apoya background-position y -repeat!

También paleta PNG de 8 bits con transparencia alfa completa existen, al contrario de lo que Photoshop y GIMP pueden hacerle creer, y se degradan mejor en IE6: simplemente reduce la transparencia a 1 bit.Usar pngcuanto para generar dichos archivos a partir de PNG de 24 bits.

Answer 4

IE7.js proporcionará soporte para PNG (incluida la transparencia) en IE6.

Answer 5

Me he equivocado al intentar crear un sitio con .pngs y simplemente no vale la pena.El sitio se vuelve lento y utilizas hacks que no funcionan al 100%.Aquí está un buen artículo sobre algunas opciones, pero mi consejo es encontrar una manera de hacer que los gifs funcionen hasta que no tengas que soportar IE6.O simplemente dale a IE6 una experiencia degradada.

Answer 6

Usar archivos PNG en IE6 no es más difícil que cualquier otro navegador.Puedes admitirlo todo en tu CSS sin Javascript.He visto este truco mostrado antes...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

No estoy tan seguro de que sea CSS válido, pero dependiendo del sitio, puede que no importe mucho.

(Vale la pena señalar que la URL de la primera imagen se basa en el directorio de la hoja de estilo, mientras que la segunda se basa en el directorio de la página que se está viendo; por eso no coinciden)

Answer 7

@Hboss

Eso está muy bien si conoces exactamente todos los archivos (y las dimensiones de cada uno) que vas a mostrar; sería un verdadero dolor de cabeza mantener ese archivo CSS, pero supongo que sería posible.Cuando quieras empezar a utilizar PNG transparentes para algunos propósitos muy comunes:a) gráficos incidentales como iconos (quizás de diferentes tamaños) que funcionan en cualquier fondo, y b) fondos repetidos;entonces estás jodido.Todas las soluciones que he probado se han topado con un obstáculo en algún momento (no puedo seleccionar texto cuando el fondo es transparente, a veces las imágenes se muestran en tamaños extravagantes, etc., etc.), y descubrí que para obtener la máxima confiabilidad tendré que volver a gifs.

Mi consejo es darle una oportunidad al truco de transparencia PNG, pero al mismo tiempo darse cuenta de que definitivamente no es perfecto, y solo recuerde, está haciendo todo lo posible para los usuarios de un navegador que tiene más de 7 años.Lo que hago estos días es ofrecerles a los usuarios de IE6 una ventana emergente en su primera visita al sitio, con un recordatorio amigable de que su navegador está desactualizado y no ofrece las funciones requeridas por los sitios web modernos y, aunque haremos nuestro mejor esfuerzo para brindarle lo mejor, obtendrá una mejor experiencia en nuestro sitio y en Internet en general si MEJORA BIEN.

Answer 8

Creo que todos los navegadores admiten PNG-8.No está mezclado alfa, pero tiene fondos transparentes.

Answer 9

Puede que me equivoque, pero estoy bastante seguro de que IE6 y menos simplemente no hacen transparencia con los archivos PNG.

En cierto modo lo eres y en cierto modo no lo eres.

IE6 no tiene soporte nativo para ellos.

Sin embargo, IE tiene soporte para objetos javascript/css y COM personalizados (que es como implementaron originalmente XmlHttpRequest)

Todos estos trucos básicamente hacen esto:

• Encuentra todas las imágenes png
• Utilice un filtro de imagen Directx para cargarlos y producir una imagen transparente en algún tipo de formato que IE comprenda.
• Reemplace las imágenes con la copia filtrada.

Answer 10

Una cosa en la que pensar son los clientes de correo electrónico.A menudo desea transparencia PNG-24, pero en Outlook 2003 con una máquina que utiliza IE6.Los clientes de correo electrónico no permitirán trucos CSS o JS.

Aquí hay una buena manera de manejar eso.http://commadot.com/png-8-that-acts-like-png-24- without-fireworks/

Answer 11

Si exporta sus imágenes como PNG-8 desde Fireworks, actuarán igual que las imágenes gif.Así que no se verán grises y de mierda, la transparencia será transparencia pero no tendrán toda la belleza de 24 bits que tienen otros navegadores.

Puede que no resuelva totalmente su problema, pero al menos puede llegar a una parte del camino simplemente reexportándolos.

Answer 12

Puede que me equivoque, pero estoy bastante seguro de que IE6 y menos simplemente no hacen transparencia con los archivos PNG.

Tengo dos "soluciones" que utilizo.Cree archivos GIF con transparencia y utilícelos en todas partes, o simplemente utilícelos para IE 6 y versiones anteriores con hojas de estilo condicionales.El segundo realmente solo funciona si los usas como fondo, etc.