У меня есть следующий логотип, который отображается в том же цвете фона, что и тело HTML в FF3, Chrome (# 363636).
Но в IE8 он отображает другой, более темный цвет.
Этот FF3 / Chrome прощает мой PNG, или это просто еще одна ошибка IE (я думал, что они исправили поддержку PNG в IE7)?
Обновление. У меня все еще возникает эта проблема, и аргументы pngcrush, которые я использую для ее исправления, следующие:
pngcrush -replace_gamma 0.5181347 infile.png outfile.png
Бинарная ссылка Win32: здесь.
У вас есть структура информации о гамма-коррекции (фрагмент gAMA) в вашем PNG. Это нормально, если вы работаете с фотографиями, где вам нужна гамма-коррекция, но это не подходит для Интернета.
В Интернете браузеры обычно не применяют гамма-коррекцию к цветам HTML / CSS или другим изображениям, поэтому, если вы используете гамма-коррекцию, вы получите результаты для своего PNG, несовместимые с остальной частью страницы. Некоторые браузеры не применяют гамму PNG именно по этой причине, поэтому вы получаете переменные результаты.
Загрузите логотип в редактор изображений и сохраните его без информации о блоке gAMA. Подробнее.
Самый популярный ответ здесь предлагает причудливый сброс значения гаммы 0,5181347 с помощью pngcrush. Это может сработать в некоторых вселенных, но в нашем лучший способ - удалить всю информацию о цветовом пространстве из PNG, чтобы она отображалась исключительно в том же нейтральном пространстве триплетов RGB, которое браузеры используют для цветов в CSS:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png
Для настоящих цветовых головок это означает, что исходный цвет, который вы создали, может не отображаться на другом мониторе или в операционной системе, но все ваши цвета с одинаковыми значениями RGB будут отображаться одинаково для каждого пользователя в соответствии с браузером + ос они включены. В частности, фон или смежные цвета, примыкающие к PNG, будут совпадать, поэтому вы можете создать свой сайт с взаимосвязанными изображениями и цветами.
Я обсуждал проблему цвета PNG в Internet Explorer и его решение со снимками экрана. Решение состоит в том, чтобы удалить гамма-фрагмент из изображения PNG (например, с помощью утилиты TweakPNG). Это позволяет отображать изображения с правильными оттенками в Internet Explorer. Некоторые необычные браузеры могут по-прежнему работать хаотично.
Вам необходимо удалить фрагменты как gAMA, так и sRGB из вашего PNG. Кроме того, вам необходимо удалить любой цвет / цветовой профиль ICC, прикрепленный к изображению.
Photoshop «Сохранить в Интернет» добавляет стандартный профиль sRGB ICC - он отлично подходит для изображений содержимого, но совершенно не подходит для стилизации изображений, где вам нужно соответствовать цветам CSS.
Это особенно заметно в Safari, о котором у меня есть сообщение в блоге .
Я заметил эту проблему во всех IE - 6, 7, 8. Некоторые изображения PNG имели бы черные контуры вокруг них в прозрачных областях. Оказалось, что мне пришлось открыть GIMP (мой бесплатный кроссплатформенный редактор изображений), открыть PNG, в котором возникла проблема, и использовать инструмент «Нечеткое выделение» на 150%, чтобы повторно выбрать прозрачную область, и нажать «Удалить». Затем повторно сохраните. Обычно это устраняет пятнистость вокруг PNG в прозрачных областях примерно на 98%.
Если это не сработало, перезагрузите GIMP, установите белый фон, выберите Flatten Image, установите порог Fuzzy Select на 3%, выберите фон, который вы хотите удалить, выберите Delete (Очистить), затем снова выберите фон. с порогом 150% удалите, а затем повторно сохраните изображение.
Обратите внимание на мой инструмент «Нечеткое выделение», в моих настройках GIMP был установлен флажок «Сглаживание», снимите флажок «Растушевка», выберите «Выбрать прозрачные области», снимите флажок «Образец слияния» и «Выбрать по составному».
Да, похоже, это ошибка IE с изображениями PNG с прозрачным фоном. Ни в одном другом браузере - Opera, Safari, Firefox, Chrome - нет этой проблемы. Я подозреваю, что некоторые графические программы устанавливают прозрачность 50% как часть некоторого сглаживания по краям, потому что проблемы возникают только с краями. Я думаю, что браузеры, отличные от IE, обрабатывают 50% прозрачности пикселя, но IE может понимать только 100% прозрачность пикселя - просто догадка.
Это единственное решение, которое сработало для меня: http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8
Другим может быть полезно узнать, что использование Yahoo Smushit для оптимизации изображений для Интернета исправлено эта проблема для меня (и в целом неплохо было бы пропустить ваши изображения через это или что-то подобное).
