Не все верстальщики с «рождения» знают, что самый популярный и распространенный браузер Internet Explorer не отображает PNG правильно, точнее сказать он не отображает прозрачность графики «самостоятельно». Для достижения одинакового отображения страницы во всех браузерах нужно хорошо потрудиться, поломать голову не один час. Раньше много времени я тратил на технологию обхода использования PNG: сделать тень блока на странице можно и с помощью других графических форматов, но это дает много «лагов» в качестве верстки страницы, а значит и снижает уровень профессионализма верстальщика (следовательно, его карьеру и гонорар). В данной статье я расскажу вам, как сделать PNG прозрачным в IE, прибегая только к помощи JavaScript и CSS, PNG – как просто вставленной картинки, а так же как фон. Верстальщик, вот тебе плюс один к знаниям.
Сразу уточним, что Opera, FireFox и подобные браузеры отображают PNG штатно.
Рассмотрим случай «ДО» применения приема.

Исходная картинка в формате PNG.



Рис. 1. «Звезда – прозрачный объект с внешним свечением»



Рис.2. Вот как Рис.1 отображается в браузерах FireFox, Opera, IE. Очевидно, что IE не отображает PNG правильно.



Рис.3. А вот после применения приема, как видите теперь PNG стал прозрачным.



И так, перейдем, наконец то к применению приема.
1. Вам нужны файлы “null.gif” и “pngie.js”. Они должны находиться в одной папке, или хотя бы тогда прописывайте адрес к файлу «null.gif» в «pngie.js»
2. В страницу вставляйте код вызова скрипта, в самый конец страницы:

3. В страницу добавьте стиль:

4. Задайте класс для картинки “iePNG”.
5. Задайте картинке обязательно ее истинные размеры с помощью параметров width, height.
6. Готово.
Интересные аспекты применения:
1. Вы можете вставлять CSS прямо в стиль объекта
Например

2. Вы можете делать картинку фона прозрачной!
Например


Скачайте архив в нем находятся 2а нужных вам файла и пример применения - png.zip [9,26 Kb] (cкачиваний: 824)