Портал SzenProgs

Кожен WEB-дизайнер, починаючи створювати інтерфейси з напівпрозорими заливками або переходами, зустрічався з таким форматом якPNG. Цей формат містить шар з альфа каналом, який дає можливість створювати на зображенні області з різним рівнем прозорості. PNG зображення підтримуються браузерами, тому їх можна використовувати для оформлення дизайну сайту. Але є зворотний бік цієї ситуації.

Існує кілька варіантів умовитиIE6обробити прозорість у PNG-зображеннях. Розповім про кожного по порядку.

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

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

Фільтр AlphaImageLoader дозволяє відображати зображення між фоном елемента та його вмістом. Якщо у фільтрі описано PNG, то активується альфа канал зображення і з'являється прозорість.

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

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

Щоб фільтр правильно працював, потрібно виконати одну з таких умов. У елемента, до якого потрібно застосувати фільтр, має бути задано властивість:

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

Не варто плутати альфа-фільтр та фон. Це різні верстви елемента. Фон стоїть позаду всіх верствелемента, а фільтр – посередині. Тому властивості CSS фону (позиція, повторюваність і т.д.) на фільтр не діють. Якщо PNG з прозорістю використовується в елементі IMG, то доведеться трохи шаманити. Справа в тому, що зображення з властивості SRC буде вищим, ніж альфа канал, тому воно перекриватиме наш прозорий малюнок. Вихід - в якості SRC малюнка встановити однопіксельний прозорий GIF, а PNG виводити через фільтр.

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

Сподіваюся, вам допоможе хоча б один із описаних вище методів боротьби з цією навалою. Якщо виникнуть питання – реєструйтесь та пишіть. По можливості допоможемо.