Используем формат png как фоновый рисунок

Опубликовано: 3 июля, 2008 | Рубрика: Кодинг | Тэги: AlphaImageLoader, Internet Explorer, png | 9 Комментариев »

Как вам известно, Internet Explorer 6 не умеет правильно отображать изображения формата png. Web-дизайнеры идут на различные ухищрения, чтобы это исправить. Для этого используется либо фильтр, любезно предоставленный самой компанией-производителем браузера, либо скрипты сторонних разработчиков. Но сейчас я не буду описывать эти методы и  давать оценку тому, какой метод предпочтительнее. В заметке я лишь напишу какие трудности и неожиданности могут вас подстерегать если вы используете формат png как фоновый рисунок.

Во-первых:

Ни скрипты ни популярный метод, использующий фильтр AlphaImageLoader не позволит вам делать фон повторяющимся (background-repeat: repeat}. Единственное, что он может, помимо простого отображения (crop), растянуть фон, для этого указывается атрибут scale, причём направление растягивания задавать невозможно. Фон растягивается на ширину и высоту всего блока, которому указан фон. Понятное дело, что при таком методе картинка деформируется.

Во-вторых:

Используете ли вы скрипт или фильтр для корректного отображения полупрозрачных png в Internet Explorer 6, убедитесь что в блоке с фоновым изображением работают ссылки и элементы формы. Скорее всего, они будут неактивными: ссылки не кликаются, в поле ввода или textarea невозможно что-либо ввести. Исправляется это легко, просто укажите для неактивных элементов относительное позиционирование (position:relative).

В-третьих:

Не пытайтесь никогда задавать позиционируемому блоку фоновый полупрозрачный png, будь то абсолютное (absolute) или относительное (relative) позиционирование. В этом случае неактивные ссылки и элементы формы не удастся разблокировать даже вышеуказанным способом. Причина такого поведения мне не ясна. Просто примите к сведению: в позиционируемый блок добавьте дополнительный блок, для которого и применяйте фоновое изображение.

И последнее:

На сегодняшний день мне неизвестен ни один метод, позволяющий не только корректно отобразить полупрозрачное фоновое изображение png в Internet Explorer 6, но и позиционировать его (background-position).

Такой способ существует, успешно применяю его в проектах, над которыми работаю.

---