una transparente sea que poner imagen hacer guardar fondo con como browser png transparency

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



fondo transparente paint 3d (12)

Podría estar equivocado, 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 locos javascript / css personalizados y objetos COM (que es cómo implementaron originalmente XmlHttpRequest)

Todos estos hacks básicamente hacen esto:

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

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 de PNG también funcione en navegadores "antiguos". ¿Cuál es la mejor solución?

edita a continuación

@mabwi & @syd - No estoy de acuerdo con el uso de un PNG o no. ¡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.

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

Me he equivocado al tratar de crear un sitio con .pngs y simplemente no vale la pena. El sitio se vuelve lento, y utiliza hacks que no funcionan al 100%. Aquí hay un buen artículo sobre algunas opciones , pero mi consejo es encontrar una forma de hacer que los archivos .gif funcionen hasta que no tenga que soportar IE6. O simplemente dale a IE6 una experiencia degradada.

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 uso. 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ás usando como fondos, etc.

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

@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 puedo seleccionar texto cuando el fondo es transparente, a veces las imágenes se muestran en tamaños absurdos, etc.), y he encontrado que para una máxima confiabilidad, '' Tendré que volver a los gifs.

Mi consejo es darle una oportunidad al hack de transparencia PNG, pero al mismo tiempo darse cuenta de que definitivamente no es perfecto, y solo recuerde, 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.

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 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 este sea un CSS válido, pero dependiendo del sitio, puede que no importe tanto.

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

He encontrado lo que parece ser una muy buena solución aquí: Unit Interactive -> Labs -> Unit PNG Fix

actualización Unidad PNG también aparece en una lista de opciones de reparación de PNG en NETTUTS

Estos son los aspectos más destacados de su sitio 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 background-image attributes.
  • Se ejecuta automáticamente No tiene que definir clases o llamar a funciones.
  • Permite el ancho automático y los elementos de altura automática.
  • Súper simple de implementar.

Una cosa en que pensar es en 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/

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 tu problema por completo, pero al menos puedes quedarte solo reexportándolos.

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