PNG IE 6 - наболевшая тема

В этой статье хочу осветить старую наболевшую тему - прозрачность в Internet Explorer версий ранее 5.5 и 6. Тем кто уже давно разобрался с данным вопросом, можно пропустить этот пост, т.к скорее всего вы не найдете здесь не чего нового, а тем, кто столкнулся с данной проблемой впервые или не совсем понял как это работает при Разработка сайтов - милости просим.

Итак для начала что за формат такой PNG и в чем его отличие от GIF в плане прозрачности:

Оба этих формата (и другие TIFF, TGA, PSD), используют "альфа канал" - канал это режим цветности в изображении, например если используеться режим цветности RGB, то у изображения имееться три канала R - "read" красный, G - "green" зеленый и B - "blue" синий. Информация из этих каналов береться для создания необходимого оттенка (оранжевый, фиолетовый, желтый). Ну а "Альфа канал" - это дополнительный канал содержащий в себе бит информации о прозрачности изображения, и в зависимости от типа "альфа" (PNG позволяет использовать 254 или 65534 уровня частичной прозрачности) может иметь различные уровни прозрачности.

Альфа-канал, называют еще - маска-канал, это просто способ объединить переходную прозрачность с изображением. Формат GIF поддерживает простую бинарную прозрачность - когда любой пиксель может быть либо полностью прозрачным, либо абсолютно непрозрачным, это и есть гланый "недостаток" GIF изображения в сравнении с PNG.

Ну чтож с альфа-прозрачностью разобраись, теперь поговорим о том как же заставить IE 6 и поздих версий правильно отображать изображения с "Альфа-каналом".

В сети много примеров решения данной проблемы, но я предлагаю остановиться на использовании IE PNG Fix 2.0 Alpha 4.

Преимущества:

• Отсутствие Expression в CSS
• Поддержка как в обычных тегах IMG так и фонового изображения
• Дублирование фонового изображение
• Хорошая документация
• Поддержка проэкта и выход новых версий
• Возможность всегда скачать самую свежую версию commit

Как это работает.

В архиве находяться следующие файлы:

• .htaccess - содержит в себе строку "AddType text/x-component .htc", и указывает на добавление в документ файла .htc
• iepngfix.htc - содержит скрипт который выполняет всю работу по обработке PNG
• blank.gif - прозрачный GIF зазмером 1x1 px которым будет заменяться параметр SRC у картинок и фоновое изображения, для применения фильтра
• iepngfix_tilebg.js - скрипт который добавляет поддержку дублирования фонового изображения PNG
• Изображения PNG и GIF - для демонстрации
• Файл index.htm - демонстрирует работу скрипта

Итак подключам все это дело к странице в которой хотим использовать полупрозрачные PNG картинки и фоновые изображения.

В head добавляем подгрузку скрипта для поддержки дублирования фонового изображения:

<script src="iepngfix_tilebg.js" type="text/javascript"><!--mce:0--></script>

В CSS всойствах элементов для которых хотим использовать PNG с альфа-каналами указываем параметр "behavior" в значении которого относительный путь к скрипту iepngfix.htc:

img, div, input { behavior: url("iepngfix.htc")}

Теперь для всех картинок, контейнеров и полей форм будут обрабатываться PNG изображения, у картинок из атрибута SRC, у DIV из свойства "background".

Примечание

не забываем открыть файл "iepngfix.htc" и указать правильный путь к однопиксельному, прозрачному GIF!!! Этот путь должен быть относительным (относительно файла "iepngfix.htc"), если путь будет сформирован не верно, скрипт не будет работать!

Ну вроде бы все, далее устанавливаете фоновые изображения для блоков и остальных элементов как обычно, скрипт сам все сделает, а подключаете скрипты и CSS файлы только для IE 6 с помощью Условных комментариев для IE 6.

• Download
• Demo

PS. И не забудьте подписаться на ленту новостей RSS

В Мой МирВ этой статье хочу осветить старую наболевшую тему - прозрачность в Internet Explorer версий ранее 5.5 и 6. Тем кто уже давно разобрался с данным вопросом, можно пропустить этот пост, т.к скорее всего вы не найдете здесь не чего нового, а тем, кто столкнулся с данной проблемой впервые или не совсем понял как это работает - милости просим.Скопировать в блог

<p><a href="http://www.cleverscript.ru/html/validnaya-verstka/18-png-ie-6-.html"><img style="margin-right:15px;" align="left" alt="" src="http://www.cleverscript.ru/images/stories/png_fix.gif"/></a><a title='PNG IE 6 - наболевшая тема' style='font-size:18px;font-weight:bold;' href='http://www.cleverscript.ru/html/validnaya-verstka/18-png-ie-6-.html'>PNG IE 6 - наболевшая тема</a><br/>В этой статье хочу осветить старую наболевшую тему - прозрачность в Internet Explorer версий ранее 5.5 и 6. Тем кто уже давно разобрался с данным вопросом, можно пропустить этот пост, т.к скорее всего вы не найдете здесь не чего нового, а тем, кто столкнулся с данной проблемой впервые или не совсем понял как это работает - милости просим. </p>