Couleur d'arrière-plan d'une image PNG dans IE8
J'ai le logo suivant, qui affiche la même couleur de fond que le corps HTML dans FF3, Chrome (#363636).
Mais dans IE8 il affiche un autre, plus la couleur sera foncée.
Est-ce FF3/Chrome étant prêt à pardonner de mon PNG, ou tout simplement une autre IE bug (je pensais qu'ils fixe PNG soutien dans IE7)?
Mise à jour: je reçois toujours ce problème, et le pngcrush arguments que j'utilise pour corriger sont:
pngcrush -replace_gamma 0.5181347 infile.png outfile.png
Le binaire Win32 lien est ici.
Vous devez vous connecter pour publier un commentaire.
Vous avez une correction gamma de l'information (gAMA morceau) de la structure de votre PNG. C'est très bien si vous travaillez avec des photos où vous voulez la correction gamma, mais ce n'est pas la bonne chose pour le web.
Sur le web, en général, les navigateurs ne pas appliquer la correction du gamma HTML/CSS de couleurs ou d'autres images, donc si vous utilisez la correction de gamma, vous obtiendrez des résultats sur votre PNG qui sont en contradiction avec le reste de la page. Certains navigateurs ne s'applique pas PNG gamma pour cette raison exacte, qui est pourquoi vous obtenez les résultats de la variable.
Charger le logo dans un éditeur d'image et l'enregistrer en arrière sans que le gAMA morceau de l'information. Plus.
Le top-rated de réponse ici suggère un bizarre réinitialisé à la valeur gamma de 0.5181347 à l'aide de pngcrush. Cela peut fonctionner dans certains univers, mais dans le nôtre, votre meilleur chemin est de dépouiller toutes les couleurs de l'espace d'information de la PNG, de sorte qu'il est rendu purement dans le même neutre RVB-triplet espace que les navigateurs utilisent pour les couleurs en CSS:
Ce que cela signifie pour de vrai couleur-chefs, c'est que la couleur d'origine que vous avez conçu peut ne pas apparaître le même sur un autre moniteur ou du système d'exploitation, mais toutes vos couleurs avec les mêmes valeurs RVB sera rendue de la même façon pour chaque utilisateur en fonction du navigateur+os qu'ils sont sur. Plus précisément, le fond ou à proximité de couleurs contiguës à un PNG correspondent, de sorte que vous pouvez concevoir votre site avec verrouillage des images et des couleurs.
J'ai discuté de la PNG Problème de Couleur dans Internet Explorer et de sa solution avec des captures d'écran. La solution est de supprimer le gamma morceau de l'image PNG (à l'aide de TweakPNG utilitaire par exemple). Cela rend les images de rendu dans le bon nuances dans Internet Explorer. Certains rares navigateurs peuvent toujours se comporter de façon erratique.
Vous avez besoin de supprimer les deux gAMA et sRGB morceaux à partir de votre PNG.
En outre, vous devez supprimer toutes les couleurs ICC/profil de couleur attaché à l'image.
Photoshop "Enregistrer pour le Web", ajoute un standard sRGB profil ICC - qui est idéal pour contenu des images, mais pas du tout le style des images où vous en avez besoin pour correspondre à la CSS de couleurs.
C'est particulièrement sensible dans Safari - sur laquelle j'ai post de blog.
J'ai remarqué ce problème sur tous IEs -- 6, 7, 8. Certaines des images PNG aurait contours noirs autour d'eux dans les zones transparentes. S'est avéré que j'ai dû ouvrir Gimp (mon gratuit multi-plateforme éditeur d'image), ouvrez le PNG qui avait le problème, et d'utiliser le Flou outil sélection de 150% à resélectionner la zone transparente et cliquez sur Supprimer. Puis réenregistrer. Qui habituellement résolu les taches autour de la Png dans les zones transparentes d'environ 98%.
Si cela ne fonctionne pas, puis de recharger dans Gimp, définir l'arrière-plan blanc, choisissez Aplatir l'Image, réglez le Flou Sélectionnez seuil de 3%, sélectionnez l'arrière-plan que vous souhaitez supprimer, cliquez sur Supprimer (Effacer), puis sélectionnez à nouveau le fond encore une fois avec le seuil de 150%, de supprimer, puis enregistrez l'image.
Note sur mon Floue outil de sélection de mon Gimp paramètres ont été vérifier l'Anticrénelage, décochez la Plume Bords, cochez l'option Sélectionner des Zones Transparentes, décochez l'Échantillon Fusionné, et de choisir Par Composite.
Oui, cela semble être un IE bug avec les images PNG qui ont un arrière-plan transparent. Aucun des autres navigateurs, Opera, Safari, Firefox, Chrome, ont ce problème. Mon soupçon est que certains programmes image sont comme 50% de transparence dans le cadre de certains types de anticrénelage sur les bords, parce que c'est seulement les bords qui sont d'avoir des problèmes. Je pense que le non-IE navigateurs sont de manutention de 50% de transparence sur un pixel, mais IE ne peut comprendre comme la transparence de 100% sur un pixel -- juste une intuition.
C'est la seule solution qui a fonctionné pour moi:
http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8
Il peut être utile à d'autres, à savoir que l'utilisation de Yahoo Smushit pour optimiser les images pour le web corrigé ce problème pour moi (et c'est une bonne idée en général de gérer vos images par le biais de ce ou quelque chose de similaire).