Проблема прозрачности PNG в IE6

Каждый развивающийся WEB-дизайнер, начиная создавать интерфейсы с полупрозрачными заливками или переходами, встречался с таким форматом как PNG. Этот формат содержит в себе слой с альфа каналом, который дает возможность создавать на изображении области с разным уровнем прозрачности. PNG-изображения поддерживаются браузерами, поэтому их можно использовать для оформления дизайна сайта. Но есть обратная сторона этой ситуации.

Прозрачность в PNG хорошо отображается практически во всех браузерах, кроме, Internet Explorer версии 6 и ниже. В IE6 прозрачные области отображаются в виде серого фона. Некоторые мастера скажут, что давно пора забыть о пользователях IE ниже 7 версии и перестать поддерживать эти браузеры. Но в зависимости от тематики сайта и категории его посетителей, случается так, что пользователи IE6 преобладают над остальными. В основном, это сайты для домохозяек. А так как мы не ищем легких путей, сегодня поговорим о том, как заставить работать прозрачность формата PNG в IE6 и IE5.5.

Существуют несколько вариантов уговорить IE6 обработать прозрачность в PNG-изображениях. Расскажу о каждом по порядку.

Суть проблемы

IE версий 5.0, 5.5 и 6 умеют обрабатывать альфа-канал PNG. Но для того, чтобы эта обработка началась, нужно применить к изображениям фильтр AlphaImageLoader. Такие фильтры поддерживаются только браузерами IE.

Фильтр AlphaImageLoader позволяет отобразить изображение между фоном элемента и его содержимом. В случае, если в фильтре описано PNG, то активируется альфа канал изображения и появляется прозрачность.

Пример присвоения фильтра к DIV элементу:

Параметр фильтра src задает адрес изображения, который будет помещен в альфа-слой. Параметр sizingMethod задает способ расположения изображения в слое. Может принимать одно из следующих значений:

• crop - обрезать изображение, если оно больше размера родительского блока.
• image - подогнать элемент по размеру изображения. Масштабирование не выполняется (значение по умолчанию)
• scale - подогнать изображения по размеру родителя. Масштабирование не выполняется.

Чтобы фильтр правильно работал, нужно выполнить одно из следующих условий. У элемента, к которому нужно применить фильтр, должно быть задано свойство:

• height;
• width;
• position: absolute;
• contenteditable="true"
• writing-mode: tb-rl;

Не стоит путать альфа-фильтр и фон. Это разные слои элемента. Фон стоит позади всех слоев элемента, а фильтр - посередине. Поэтому, свойства CSS фона (позиция, повторяемость, и т.д.) на фильтр не действуют. В случае, если PNG с прозрачностью используется в элементе IMG, то придется немного шаманить. Дело в том, что изображение из свойства SRC будет выше, чем альфа канал, поэтому оно будет перекрывать наш прозрачный рисунок. Выход - в свойство SRC рисунка установить однопиксельный прозрачный GIF, а PNG выводить через фильтр.

Также, стоит отметить тот факт, что ссылки в блоке, к которому применен фильтр, не будут работать. Для того, чтобы они начали работать нужно задать этим ссылкам относительное позиционирование при помощи CSS свойства position: relative. Также, нужно учесть тот факт, что блок, к которому был применен фильтр не должен иметь позиционирования relative или absolute.

В связи с большими объемами материала по прозрачности PNG в IE 6 эта статья была разбита на несколько частей, с описанием всех известных методов решения проблемы.

Для того, чтобы прозрачность в PNG начало отображаться в IE6 и ниже, можно воспользоваться одним из следующих методов:

• Прозрачный PNG в IE 6 с ручной обработкой
• Прозрачность PNG через HTC от TwinHelix
• Прозрачность PNG через jQuery-плагин

Надеюсь, вам поможет хотя бы один из описанных выше методов борьбы с этой напастью. Если возникнут вопросы - регистрируйтесь и пишите. По возможности поможем.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

• 1
• 2
• 3
• 4
• 5

Проблема прозрачности PNG в IE6
Справочники
Скрипты, инструкции, справочники