Произвольный цвет фона у 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: обратите внимание на то, что мы не убиваем прозрачность, мы меняем этот противный серый фон, на любой другой, при этом сама полупрозрачность есть, и мы ее получим, применив фильр к картинке!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>