Блог > Html/Css верстка > PNG прозрачность в IE6 {

PNG прозрачность в IE6}

PNG реализуется через альфа-канал, который позволяет задавать различные степени прозрачности. Современные браузеры умеют работать с PNG, однако IE старых версий не отображают прозрачность. Вместо этого верстальщик видит серый фон.

Одним из способов корректной работы IE с PNG прозрачностью, - подключить фильтр AlphaImageLoader.

В своих статья мы любим приводить конкретные примеры из практики, поэтому поговорим о решении IEPNGFix. В данном решении нет ничего революционного (JavaScript + фильтр). IEPNGFix позволяет использовать как сами картинки, так и их же, но в качестве фонового изображения (background).

Как использовать

При использовании изображения фильтром, необходимо убрать основное изображение, которое использует IE без прозрачности. Для реализации этого метода используется прозрачный однопиксельный gif, сквозь который мы увидим png-картинку, загруженную фильтром.

Скопируйте iepngfix.htc и blank.gif (прозрачный gif) в папку вашего сайта.
В css для необходимого элемента пропишите:

img { behavior: url(iepngfix.htc) }

Для использования свойств:

background-repeat
background-position

необходимо подключить в HTML:

Недостатки

не работают ссылки на PNG фоне в IE (решается с помощью использования position: relative)
Необходимо учесть, что элемент к которому применен AlphaImageLoader не должен быть спозиционирован ни абсолютно, ни относительно, иначе ссылки не будут работать!
трудности со слоями z-index
Проблема с border и padding
Проблема при использовании псевдокласса :hover
Использование прозрачного gif
Исправление PNG происходит визуально

Еще одним из способов корректной работы IE с PNG прозрачность, является использование языка Microsoft VML, в котором реализована поддержка PNG формата. Данный способ реализуется с помощью скрипта DD_belatedPNG.

Как использовать:

подключить скрипт DD_belatedPNG.js

вызовите функцию DD_belatedPNG.fix(), в параметрах которой обязательно укажите CSS селектор (как правило это класс) объектов, которые содержат PNG изображения

Недостатки

Нельзя использовать body как CSS селектор аргумента в функции fix()
Проблема при использовании background-position: fixed;

В своих проектах мы используем как первый, так и второй вариант. Второй способ на наш взгляд предпочтительней.
Какой способ выбрать, - решать Вам.

Тестируйте!

предыдущая следующая

Комментарии: