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

Справочники

Рисунок Проблема прозрачности PNG в IE6
Проблема прозрачности PNG в IE6 Проблема прозрачности PNG в IE6
оценка: 5.0 из 5
оценок: 2

Каждый развивающийся 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 элементу:

Code
<div style="width:300px; height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://szenprogs.ru/img/sys/logo.png', sizingMethod='scale');">">
  Прозрачность в IE6
</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 и ниже, можно воспользоваться одним из следующих методов:

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

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

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




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

rss
Категория:Справочники
Просмотрено:4894
Рейтинг:5.0/2
Дата добавления:2011-04-25 08:02, Понедельник
Добавил:Szen
Теги:Прозрачность, Transparent, дизайн, PNG, IE6

Мини-форум

№ 02011-04-25 08:02
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Проблема прозрачности PNG в IE6".
Гость
Учавствовать в обсуждении "Проблема прозрачности PNG в IE6" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Ваша оценка дизайна
Всего ответов: 1205
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz