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

Формат PNG поддерживает глубину цвета в 48 бит на пиксел, отдельный альфа-канал, улучшенное сжатие данных (PNG использует алгоритм сжатия Deflate без потерь информации), возможность использования гамма-коррекции, сохранение компрессированных или некомпрессированных текстовых вставок для хранения информации о копирайте или других целей. Всё это позволяет задавать различную степень прозрачности области изображения
Многие браузеры умеют работать с данным форматом и поддерживают его прозрачность: Mozilla 0.9+ (Firefox, Netscape 6+ ...), Opera 6+, Konqueror 3+, Safari 1.0+ ...
В Internet Explorer 5.5+ (и младше IE7, так как он полностью поддерживает png-формат) для корректного отображения файла *.png к изображению необходимо применить фильтр CSS AlphaImageLoader.
Хочется напомнить, что фильтры CSS поддерживает только Internet Explorer, остальные браузеры отобразят элемент без применения фильтра, что в данном случае нам на руку.

Параметры фильтра AlphaImageLoader:

src - определяет адрес, по которому расположено изображение
sizingMethod - говорит что делать, если изображение не соответствует размерам элемента в который оно загружается
- crop - обрезать изображение если оно больше размеров объекта родителя
- image - увеличить или уменьшить объект по размеру изображения (значение по умолчанию)
- scale - изменить масштаб изображения по размеру родителя

Фильтр требует, чтобы у элемента, к которому он применяется, было задано или width (height), или position: absolute, или writingMode: tb-rl, или contentEditable был установлен в true.
Фильтр AlphaImageLoader отображает изображение в пределах элемента к которому он применяется, между его фоном и контентом, поэтому если мы применяем фильтр к элементу <img>, необходимо затереть исходное изображение, чтобы оно не мешало отображению изображения, полученного в результате работы фильтра AlphaImageLoader. Для этого мы использум прозрачный gif размером 1x1 px, и назовём его blank.gif. В итоге мы получим прозрачный gif, растянутый до нужных нам размеров, а сквозь него увидим png-изображение, загруженное фильтром.

Чтобы было понятно о чём мы собственно говорим, загрузите эту страницу в Internet Explorer и посмотрите как отобразится необработанное png-изображение

Есть много вариантов подключения фильтра, все они имеют свои плюсы и недостатки. Рассмотрим некоторые из них

Вариант 1:
Проверяем браузер пользователя, любым удобным Вам способом, и если это Internet Explorer весии 5.5 и выше (в более ранних версиях фильтр не поддерживается), применяем к элементу фильтр AlphaImageLoader

как это выглядит:

пример html-кода:

Данный вариант можно использовать если количество png-файлов невелико, в противном случае ваш html-код может разрастись до невероятных размеров, да и просто надоест обрабатывать каждую картинку.
Мы привели этот пример потому, что здесь нет ничего лишнего - только применение фильтра AlphaImageLoader к изображению, возможно это поможет Вам лучше понимать более накрученные варианты, которые мы рассмотрим ниже.

Вариант 2:
В этом примере мы воспользуемся CSS-конструкцией behavior, не являющейся стандартом CSS, но позволяющей описать "поведение стиля" в зависимости от событий, которые происходят при отображении веб-страницы. Также как и фильтр AlphaImageLoader это свойство поддерживается только в Internet Explorer, остальные браузеры просто проигнорируют его, что нам и требуется.

как это выглядит:

пример html-кода:

содержимое файла png.htc:

<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window" />
<public:attach event="onafterprint" onevent="afterPrint()" for="window" />

<script type="text/javascript">
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) && navigator.platform == "Win32";

var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged()
   {
   if (!supported || isPrinting) return;

   var pName = event.propertyName;
   if (pName != "src") return;

   if (!new RegExp(blankSrc).test(src)) fixImage();
   }

function fixImage()
   {
   var src = element.src;

   if (src == realSrc && /\.png$/i.test(src))
      {
      element.src = blankSrc;
      return;
      }

   if ( ! new RegExp(blankSrc).test(src)) realSrc = src;

   if (/\.png$/i.test(realSrc))
      {
      element.src = blankSrc;
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." + "AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
      }
   else element.runtimeStyle.filter = "";
   }

function beforePrint()
   {
   isPrinting = true;
   element.src = realSrc;
   element.runtimeStyle.filter = "";
   realSrc = null;
   }

function afterPrint()
   {
   isPrinting = false;
   fixImage();
   }

</script>
</public:component>

Как видите png.htc это по сути обыкновенный JavaScript, подключаемый CSS-конструкцией behavior. Скрипт определяет браузер пользователя, подменяет картинку и применяет фильтр AlphaImageLoader к изображению, короче, всё то же самое, что и в предыдущем примере, но отпала необходимость описывать каждую картинку в отдельности.
Файл png.htc необходимо сохранить в корне Вашего сайта. Ставить/не ставить слеш (/) перед именем файла, зависит от настроек Вашего сервера.
Минусом данного способа является то, что вызов "поведения" происходит после вывода объекта веб-страницы, и поэтому сначала появится изображение без прозрачности и лишь потом оно будет подкорректировано, что визуально очень заметно.