iphone - para - porque las imagenes png salen con fondo negro
Los archivos PNG transparentes alfa no se muestran correctamente en Mobile Safari (3)
Después de ver los sitios en ambos dispositivos (mi Mac y mi iPod Touch), creo que lo que está viendo aquí es una diferencia en los colores que pueden producir las pantallas en lugar de un error en cualquiera de los motores de procesamiento. Hay muchos factores que pueden influir en este tipo de diferencia, por ejemplo, el contraste en la pantalla portátil puede no ser tan bueno como un esfuerzo para ahorrar energía, hacer que el dispositivo sea más barato, etc.
Estoy usando algunos PNG semitransparentes como imágenes de fondo en varios sitios web. Estos son generalmente algo así como una imagen de 1x1 con una capa blanca opaca al 30 por ciento.
Me he dado cuenta de que Mobile Safari no los muestra correctamente, dándoles un tinte más oscuro / grisáceo.
¿Se trata de un error de MobileSafari (no podría imaginarlo), o tengo que hacer algo diferente, ya sea a mis páginas o PNG?
(Así es como creo los PNG: en Photoshop, cree un lienzo transparente de 1x1. Dibuje un rectángulo blanco en la Capa 1. Establezca la opacidad para, por ejemplo, 30 por ciento, Guardar para web como PNG de 24 bits con transparencia.)
Estaba tratando de hacer algunos fondos DIV simples usando un PNG de 1 píxel con transparencia parcial para hacer una caja translúcida para un texto sobre una imagen de fondo. Se veía genial en todo tipo de navegadores, hasta que probé el iPhone. Estaba haciendo la transparencia parcial, pero con este extraño tono grisáceo del que hablas en lugar de los resultados esperados.
Entonces intenté esas pruebas rojas y azules vinculadas. Ambos se veían bien la primera vez que los vi, luego, al hacer clic en actualizar, ¡se volvieron grisáceos! Lo intenté de nuevo con una nueva ventana del navegador y volví a tener un aspecto adecuado, ahh la inconsistencia que mencionaste ataca de nuevo. Bueno, simplemente giré físicamente el iPhone y, al pasar del modo paisaje al modo retrato, ¡los colores cambiaron a las versiones grisáceas!
Todas las pruebas de transparencia parcial de W3C PNG parecían perfectas en el iPhone. Sin embargo, falló la prueba de Gamma. Después de descartar la gamma como una posible causa, la perseguí durante horas, pero no conseguí nada. Incluso hice un gradiente propio que fue del 0 al 100% transparente para asegurarme de que no era mi proceso de creación de la imagen. Efectivamente, eso funcionó perfectamente, así que mi proceso es bueno.
Entonces tuve este golpe de genialidad, ¿y si el archivo fuera más grande que 1 píxel? Así que lo hice con 2 píxeles de ancho y 1 píxel de alto, 20% transparente (alfa del 80%). Bam ... funcionó! Probé todo tipo de combinaciones de 1x1, 1x2, 2x1, 2x2, 8x8. Todos ellos funcionaron correctamente a excepción de la versión de un solo píxel.
Regresé y comprobé las pruebas vinculadas anteriores, y veo que usan imágenes de 1 píxel para todos los tonos. Ah ha
Y ahí lo tiene, Mobile Safari necesita al menos 2 píxeles para trabajar con archivos PNG semitransparentes .
Utilice una imagen con cualquier dimensión que no sea 1x1.
(Respuesta abreviada para aquellos que tienen cosas que hacer)