Произвольный цвет фона у PNG24 с прозрачностью в IE6

Все знают про проблему полупрозрачных PNG-24 в IE6, выглядит она так

Серый фон, который заливает всю прозрачность, можно менять на произвольный цвет.

Эта статья о том, как избавиться от серого фона при этом не потеряв полупрозрачность :)

Сделать это можно с помощью инструмента tweakpng (http://entropymine.com/jason/tweakpng/), сам инструмент работает под виндой

Для этого открываем нужный файл (можно перетаскиванием)
затем в меню insert -> bKGD (Background color) -> выставляем нужный цвет -> сохраняем

в результате добавляется еще одна строка

теперь PNG-24 в IE6 выглядит следующим образом

Внимание: такие картинки не рекомендуется скармливать png оптимизаторам, некоторые из них могут удалить параметр bKGD, и IE6 снова будет показывать серый фон

Нормальные браузеры по прежнему будут показывать полупрозрачность…

При использовании фильтра alphaimageloader – bKGD игнорируется и рисуется прозрачный фон.

Для любознательных http://banzalik.ru/labs/ie6png24bg/ – смотреть в IE6

UPD: обратите внимание на то, что мы не убиваем прозрачность, мы меняем этот противный серый фон, на любой другой, при этом сама полупрозрачность есть, и мы ее получим, применив фильр к картинке!

  • maple03

    Разве кому-то еще нужен ie6?

  • http://banzalik.ru Александр Бойченко

    его еще достаточно много на рынке, приходится мириться :)

  • http://miripiruni.org miripiruni

    Александр, спасибо за рецепт!
    Поправь, пожалуйста, «Внимане» :)

  • http://rmcreative.ru/ Sam

    А почему не залить прозрачные области фоном?

  • http://yvelious.com Yvelious

    Интересно. Но впринципе мало пользы от того, что цвет поменяется на другой.
    Если однородный фон, то вообще нет смысла ставить картинку в формате png24.
    А если фон не однородный, то смена одного цвета на другой нам ничего не даст, с неоднородым фоном он не совпадет.

  • http://banzalik.ru Александр Бойченко

    Sam, потому, что нам может понадобиться прозрачность, и применив фильтр к картинке – мы ее получим

  • http://rmcreative.ru/ Sam

    Применение фильтра исключает необходимость выбирать фон для IE.

  • http://banzalik.ru Александр Бойченко

    Sam
    1) фильтр влияет на стабильность ие
    2) фильтр жрет память
    3) фильтр срабатывает не сразу, серый фон можно увидеть зорким глазом :)

    тем более что это рецепт, а не панацея, возможно он Вам пригодится, я во всяком случаи вижу моменты в которых он мог бы мне помочь

  • http://rmcreative.ru/ Sam

    Не не не. Погодите.

    Если мы размещаем PNG на однородном фоне — его можно и нужно залить.

    Если же мы размещаем PNG не на однородном фоне, смена цвета в IE6 делу сильно не поможет — будет так же гадко, но с другим оттенком.

    Кстати, можно и не фильтром (на всякий случай… скорее всего это уже известно): http://www.dillerdesign.com/experiment/DD_belatedPNG/

  • http://banzalik.ru Александр Бойченко

    http://banzalik.ru/labs/ie6png24bg/ – взгляните на этот пример
    по умолчанию картинка на белом фоне, она быстро рендерится, нет серого фона, нет экспрешенов

    но вдруг , я решил эту картинку поставить на другой фон, отличный от белого -> применил фильтр, получил то, что хотел
    при этом используется одна и та-же картинка

  • http://rmcreative.ru/ Sam

    Да, специфично довольно, но пригодится всё-таки может.

  • http://banzalik.ru Александр Бойченко

    Sam, я рад, что вы нашли в этом полезное для себя :)

  • http://vitaly.ya.ru Vitaly Harisov

    Если однородный фон, то вообще нет смысла ставить картинку в формате png24.

    Хочется использовать одну и туже картинку в случае когда в нормальных браузерах под картинкой градиент, а в MSIE6 белый фон (graceful degradation).

  • http://yvelious.com Yvelious

    Помнится мне, Вы как то писали сколько можно сэкономить сжав лототип в контактах.
    А теперь предлагаете использовать png24(который наверняка в два раза тяжелее), замест png8 или gif. Вижу только один плюс, что если вдруг резко поменяется фон, то можно быстро подключить альфа канал, что бы не видеть цвет в ие6. Да и то сомнительный плюс, так как страницы состоят не из одного лого и наверняка еще куча картинок придется перерезать с исходинка в связи со меной основного фона.

  • http://banzalik.ru Александр Бойченко

    Yvelious, я за разумное применение технологий – в случаи с вконтакте, так это просто неправильно выбран формат шапки

    в случаи с этой техникой, есть возможность использовать одну картинку (которая уже возможно есть на сайте) с бОльшей пользой

    это не руководство к действию – это возможность, пользоваться ею или нет решать вам :)

  • Mr. J

    А смысл использовать прозрачность при известном фоне? Чтобы было? И таким способом не получишь прозрачности в ие – просто дефолтный серый фон меняется на белый

  • Mr. J

    Прошу прощения за коммент, почитал комменты в другом месте, но убедился в своих же словах

    • http://banzalik.ru Александр Бойченко

      Это один из способов graceful degradation.

  • http://oleggromov.com Олег Громов

    GIMP в этом плане молодец: в нём при сохранении PNG можно выбрать опцию «сохранять фоновый цвет».

    А штука это достаточно полезная, что бы там ни говорили. Мне пригождалось и не раз.