Подписка
Email
Fb
RSS
Twitter
Email

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

PNG  и ie6

Часто, когда нужна прозрачность, приходится использовать на странице картинку в формате PNG-24. Формат PNG-24 может обеспечивать большое число уровней прозрачности (256) в отличии от PNG-8 и GIF, где всего два уровня — абсолютно прозрачно и абсолютно не прозрачно.

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

Прозрачность png

Для решения проблемы с PNG прозрачностью я для себя определил следующий способ, который заключается в подключении скрипта «fixpng».

Скачиваем сам скрипт и прозрачный gif размером 1×1(нужен для замены серого фона прозрачным, его нужно скопировать в папку с картинками).

Вставляем между тегами <head></head> следующий код:

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<script type="text/javascript" src="include/fixpng.js"></script> /* "include/fixpng.js"-это путь к файлу со скриптом*/
<style type="text/css"> 
.iePNG { filter:expression(fixPNG(this)); } 
.iePNG A { position: relative; }/* стиль для нормальной работы ссылок в элементах с PNG-фоном */
</style>
<![endif]>
<![endif]-->

Картинке, к которой нужно применить прозрачность, задаем класс iePNG и указываем ее размеры:

 <img src="img.png" class="iePNG" width="128" height="128" />

Готово! Теперь все должно работать корректно.

Так же использую иногда другой вариант:

  1. Подключаю скрипт DD_belatedPNG.js к странице
  2. Вызываю функцию DD_belatedPNG.fix, в качестве аргументов перечисляю классы элементов, в которых используется прозрачный png, для этого между <head></head> пишу:
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg, .png_img'); <!--перечисляем классы элементов-->
</script>
<![endif]-->

Очень простой метод и легкий скрипт.

Вы можете оставить комментарий.

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика