Цвет фона PNG в IE8

Question

У меня есть следующий логотип, который отображается как тот же цвет фона, что и тело HTML в FF3, Chrome (# 363636).

Но в IE8 он отображает другой, более темный цвет.

Является ли этот FF3/Chrome прощающим мой PNG или просто еще одна ошибка IE (я думал, что они исправили поддержку PNG в IE7)?

Update: Я все еще получаю эту проблему, а аргументы Pngcrush я использую, чтобы исправить это:

Pngcrush -replace_gamma 0,5181347 infile.png outfile.png

Интерфейс Win32 двоичную ссылка here.

Answer 1

У вас есть информация о гамма-коррекции (gAMA chunk) в вашем PNG. Это нормально, если вы работаете с фотографиями, где вы хотите гамма-коррекции, но это не подходит для Интернета.

В Интернете браузеры обычно не применяют гамма-коррекцию к цветам HTML/CSS или другим изображениям, поэтому, если вы используете гамма-коррекцию, вы получите результаты по вашему PNG, которые не соответствуют остальной части страницы. Некоторые браузеры не используют PNG гамма по этой точной причине, поэтому вы получаете переменные результаты.

Загрузите логотип в редактор изображений и сохраните его без информации о блоке gAMA. More.

Answer 2

Вам необходимо удалить оба блока gAMA и sRGB из PNG. Кроме того, вам необходимо удалить любой цветной/цветной профиль ICC, прикрепленный к изображению.

Photoshop «Сохранить в Интернете» добавляет стандартный профиль ICC sRGB ICC - это отлично подходит для изображений , но совершенно неправильно для стилизации изображений, где вам нужно соответствовать цветам CSS.

Это особенно заметно в сафари, о котором у меня есть blog post.

Answer 3

Я заметил эту проблему во всех IE - 6, 7, 8. Некоторые из изображений PNG имели бы черные контуры вокруг них в прозрачных областях. Оказалось, что мне пришлось открыть Gimp (мой бесплатный редактор кросс-платформенных изображений), открыть PNG, у которого возникла проблема, и использовать инструмент «Нечеткий выбор» на 150%, чтобы повторно выбрать прозрачную область и нажать «Удалить». Затем переустановите. Это обычно разрешало пятно вокруг PNG в прозрачных областях около 98%.

Если это не сработало, перезагрузите в Gimp, установите фон на белый, выберите «Сгладить изображение», установите порог «Нечеткий выбор» на 3%, выберите фон, который вы хотите удалить, выберите «Удалить» («Очистить»), затем снова выберите фон с порогом на 150%, удалите, а затем сохраните изображение.

Заметка на моем инструменте «Нечеткий выбор». Настройки Gimp были проверены. «Сглаживание», снимите флажок «Перо пера», установите флажок «Выбрать прозрачные области», снимите флажок «Скомпилированный образец» и «Выбрать по композиту».

Да, это, похоже, ошибка IE с изображениями PNG, которые имеют прозрачный фон. Ни один из других браузеров - Opera, Safari, Firefox, Chrome - не имеет такой проблемы. Мое подозрение заключается в том, что некоторые графические программы устанавливают 50% прозрачность как часть некоторого антиалиасинга по краям, потому что это только те грани, которые имеют проблемы.Я думаю, что браузеры, отличные от IE, обрабатывают 50% прозрачности на пикселе, но IE может понимать только 100% прозрачность на пикселе - просто догадка.

Answer 4

Ответ на наивысший рейтинг здесь предлагает странный сброс до значения гамма 0.5181347 с использованием pngcrush. Это может работать в некоторых юниверсах, но в нашем случае ваш лучший путь состоит в том, чтобы удалить всю информацию о цветовом пространстве из PNG, чтобы она отображалась исключительно в том же нейтральном пространстве RGB-триплета, которое браузеры используют для цветов в CSS:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png 

Это означает, что для настоящих цветных головок исходный цвет, который вы создали, может не отображаться на другом мониторе или в операционной системе, но все ваши цвета с одинаковыми значениями RGB будут отображаться одинаково для каждого пользователя в соответствии с браузером + os они включены. В частности, фоновые или смежные цвета, прилегающие к PNG, будут соответствовать, поэтому вы можете проектировать свой сайт с блокировкой изображений и цветов.

Answer 5

Это единственное решение, которое работает для меня: http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8

Answer 6

Я обсуждал PNG Color Problem in Internet Explorer и ее решение с снимков экрана. Решение состоит в том, чтобы удалить гамма-фрагмент из изображения PNG (например, с помощью утилиты TweakPNG). Это делает изображения рендерингом в правильных оттенках в Internet Explorer. Некоторые необычные браузеры могут по-прежнему вести себя беспорядочно.

Answer 7

Может быть полезно другим знать, что использование Yahoo Smushit для оптимизации изображений для Интернета исправило эту проблему для меня (и это хорошая идея в целом для запуска изображений через это или что-то подобное).