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

Question

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

ediciones siguientes

@mabwi & @syd - Sea o no estoy de acuerdo sobre el uso de un PNG no es el punto. ¡Este es un problema que necesito resolver!

@Tim Sullivan - IE7.js parece bastante genial, pero no creo que quiera presentar 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í es un gran artículo que explica y muestra cómo controlar la transparencia PNG en navegadores antiguos: http://www.alistapart.com/stories/pngopacity/

Answer 2

Podría estar equivocado, 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 úselos para IE 6 y anteriores con hojas de estilo condicionales. El segundo realmente solo funciona si los está usando como fondos, etc.

Answer 3

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

Answer 4

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

Answer 5

que he encontrado lo que parece ser una muy buena solución a este problema: Unit Interactive -> Labs -> Unit PNG Fix

actualización Unidad PNG también se ofrece en una list of PNG fix options on NETTUTS

Éstos son los aspectos más destacados de su página web:

• JavaScript muy compacto: menos de 1kb
• Soluciona algunos problemas de interactividad causados ​​por el atributo de filtro de IE.
• Funciona en img objects y atributos background-image.
• Se ejecuta automáticamente. No tiene que definir clases o llamar a las funciones .
• Permite el ancho automático y los elementos de altura automática.
• Súper fácil de implementar.

Answer 6

puedo estar equivocado, pero estoy bastante seguro de IE6 y menos simplemente no hacer la transparencia con los archivos PNG.

Lo tiene, y no es así.

IE6 no tiene soporte nativo para ellos.

Sin embargo, el IE cuenta con el apoyo de encargo loca javascript/css y objetos COM (que es como se implementaron inicialmente XmlHttpRequest)

Todos estos cortes 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. IE comprende
• Reemplace las imágenes con la copia filtrada.

Answer 7

He echado a perder tratando de crear un sitio con .pngs y simplemente no lo vale. El sitio se vuelve lento, y utiliza hacks que no funcionan al 100%. Aquí hay un good article on some options, pero mi consejo es encontrar la manera de hacer que los archivos .gif funcionen hasta que no tenga que soportar IE6. O simplemente dale a IE6 una experiencia degradada.

Answer 8

Usar PNG en IE6 es apenas más difícil que cualquier otro navegador. Puedes apoyarlo todo en tu CSS sin Javascript. He visto este corte se muestra 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 esto es válido CSS, pero dependiendo del sitio, puede que no importa tanto.

(vale la pena señalar que la URL de la primera imagen se basa en el directorio de la hoja de estilo, en el que el segundo se basa en el directorio de la página que se está viendo - por lo tanto por qué no coinciden)

Answer 9

@ Hboss

eso está muy bien si sabes exactamente todos los archivos (y las dimensiones de cada uno) que vas a mostrar - sería un dolor real para mantener ese archivo CSS, pero supongo que Sería posible. Cuando desee comenzar a usar PNG transparentes para algunos propósitos muy comunes: a) gráficos incidentales tales como iconos (quizás de diferente tamaño) que funcionen en cualquier fondo, yb) fondos repetidos; entonces estás jodido. Cada solución que he probado ha topado con un obstáculo en algún momento (no se puede seleccionar texto cuando el fondo es transparente, a veces las imágenes se muestran en tamaños absurdos, etc.), y lo he encontrado para la máxima confiabilidad Tendré que volver a los gifs.

Mi consejo es dar una oportunidad al hack de transparencia PNG, pero al mismo tiempo darse cuenta de que definitivamente no es perfecto, y solo recordar, está haciendo lo imposible para los usuarios de un navegador que tiene más de 7 años. Lo que hago en estos días es dar a los usuarios de IE6 una ventana emergente en su primera visita al sitio, con un recordatorio amistoso de que su navegador está desactualizado y no ofrece las características requeridas por los sitios web modernos, y aunque haremos nuestro mejor esfuerzo para Le daremos lo mejor, obtendrá una mejor experiencia de nuestro sitio y de Internet en general si SANGRADO BIEN ACTUALIZADO.

Answer 10

• IE PNG Fix 2.0 que apoya background-position y -repeat!

también con paleta de 8 bits PNG con transparencia alfa completa existe, al contrario de lo que Photoshop y GIMP pueden hacer creer, y se degradan mejor en IE6 - sólo se reduce la transparencia de 1 bit. Use pngquant para generar dichos archivos a partir de PNG de 24 bits.

Answer 11

Una cosa a tener en cuenta es los clientes de correo electrónico. A menudo desea transparencia PNG-24 pero en Outlook 2003 con una máquina que usa IE6. Los clientes de correo electrónico no permitirán trucos de CSS o JS.

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

Answer 12

Si exporta sus imágenes como PNG-8 desde Fireworks, actuarán de la misma manera que las imágenes gif. Por lo tanto, no se verán mal y gris, la transparencia será transparencia, pero no tendrán la belleza de 24 bits que otros navegadores tienen.

Puede que no resuelva por completo su problema, pero al menos puede obtener parte de camino allí simplemente reexportándolos.