internet-explorer - poner - overlay color css
Color de fondo de un PNG en IE8 (7)
Tengo el siguiente logotipo, que se muestra con el mismo color de fondo que el cuerpo HTML en FF3, Chrome (# 363636).
Pero en IE8 muestra un color diferente, más oscuro.
¿Es este FF3 / Chrome perdonar mi PNG, o simplemente otro error de IE (pensé que solucionó el soporte de PNG en IE7)?
Actualización : Todavía tengo este problema y los argumentos de pngcrush que utilizo para corregirlo son:
pngcrush -replace_gamma 0.5181347 infile.png outfile.png
El enlace binario de Win32 está here .
Debe eliminar tanto los fragmentos gAMA como sRGB de su PNG. Además, debe eliminar cualquier color ICC que se adjunte a la imagen.
Photoshop "Guardar en la Web" agrega un perfil sRGB ICC estándar, lo cual es excelente para imágenes de contenido, pero es completamente incorrecto para las imágenes de estilo en las que debe coincidir con los colores CSS.
Esto es particularmente notable en Safari, sobre el cual tengo una publicación de blog .
Esta es la única solución que me funcionó: http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8
He discutido el problema de color PNG en Internet Explorer y su solución con capturas de pantalla. La solución es eliminar el fragmento gamma de la imagen PNG (por ejemplo, mediante la utilidad TweakPNG). Esto hace que las imágenes se representen en los tonos correctos en Internet Explorer. Algunos navegadores poco comunes todavía pueden comportarse de forma errática.
La respuesta mejor calificada aquí sugiere un restablecimiento extraño al valor gamma de 0.5181347 usando pngcrush. Esto puede funcionar en algunos universos, pero en nuestro mejor camino es eliminar toda la información de espacio de color del PNG para que se muestre únicamente en el mismo espacio de triplete RGB neutral que usan los navegadores para los colores en CSS:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png
Lo que esto significa para colores reales es que el color original que diseñó puede no ser el mismo en otro monitor o sistema operativo, pero todos los colores con los mismos valores RGB se representarán de la misma manera para cada usuario de acuerdo con el navegador + están en Específicamente, el fondo o los colores adyacentes que se unen a un PNG coincidirán, por lo que puede diseñar su sitio con imágenes y colores entrelazados.
Noté este problema en todas las IES: 6, 7, 8. Algunas de las imágenes PNG tendrían contornos negros alrededor de ellas en las áreas transparentes. Resultó que tenía que abrir Gimp (mi editor de imágenes multiplataforma gratuito), abrir el PNG que tenía el problema y usar la herramienta Fuzzy Select en el 150% para volver a seleccionar el área transparente y hacer clic en Eliminar. Luego vuelve a guardar. Eso generalmente resolvió la mancha alrededor de los PNG en las áreas transparentes alrededor del 98%.
Si eso no funcionó, vuelva a cargar en Gimp, configure el fondo a blanco, elija Acoplar imagen, establezca el umbral de selección difusa al 3%, seleccione el fondo que desea eliminar, elija Eliminar (Borrar) y vuelva a seleccionar el fondo una vez más con un umbral del 150%, elimine y vuelva a guardar la imagen.
Nota sobre mi herramienta Fuzzy Select mi configuración de Gimp fue marcar Antialiasing, desmarcar Feather Edges, marcar Select Transparent Areas, desmarcar Sample Merged y Select By Composite.
Sí, esto parece ser un error de IE con imágenes PNG que tienen un fondo transparente. Ninguno de los otros navegadores (Opera, Safari, Firefox, Chrome) tiene este problema. Mi sospecha es que algunos programas de imagen se están configurando como 50% de transparencia como parte de algún tipo de antialiasing en los bordes, porque solo los bordes tienen problemas. Creo que los navegadores que no son de IE manejan un 50% de transparencia en un píxel, pero es posible que IE solo entienda como un 100% de transparencia en un píxel, solo una corazonada.
Puede ser útil para otros saber que el uso de Yahoo Smushit para optimizar las imágenes para la web corrigió este problema (y es una buena idea en general ejecutar sus imágenes a través de este o algo similar).
Tiene una estructura de información de corrección gamma (gAMA chunk) en su PNG. Eso está bien si estás trabajando con fotos en las que quieres una corrección gamma, pero no es lo correcto para la web.
En la web, los navegadores generalmente no aplican la corrección gamma a los colores HTML / CSS u otras imágenes, por lo que si utiliza la corrección gamma obtendrá resultados en su PNG que son inconsistentes con el resto de la página. Algunos navegadores no aplican PNG gamma por esta razón exacta, por lo que está obteniendo los resultados variables.
Cargue el logotipo en un editor de imágenes y guárdelo nuevamente sin la información del fragmento gAMA. More .