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

Воскресенье, 07 Март 2010

 

В этой статье хочу осветить старую наболевшую тему - прозрачность в 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.

 

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

 

 

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

 

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

 

 

Итак подключам все это дело к странице в которой хотим использовать полупрозрачные 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.

 

 

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

Метки:

Комментарии 

 
anonim Воскресенье, 24 Октябрь 2010

This site is the optimum web property. . Cheers Glenn Prolonoff!

 

 
 
anonim Понедельник, 06 Декабрь 2010

Здесь еще один эффективный способ на javascript hasNodePNG

 

 
 
anonim Четверг, 16 Июнь 2011

Добрый день!
Есть большая проблема
перепробовал тучу всяких пнгфиксов, но в них альфапрозрачнос ть работает только при пнг-24.
при пнг-8 же работает только бинарная прозрачность
можно ли какнибудь решить такую проблему?
Заранее спасибо!

 

 
 
anonim Понедельник, 20 Июнь 2011

Перевести картинки в PNG24

 

 
 
anonim Суббота, 23 Июль 2011

I like cleverscript.ru, bookmarked
bet and home

 

 

Добавить комментарий