Формат PNG (Portable Network Graphics) изначально создавался в качестве замены устаревающего формата GIF. Основными преимуществами PNG являются:

1. Неограниченное количество цветов в изображении (в отличие от того же GIF, где цветовая палитра ограничена 256 цветами)
2. Возможность использования альфа-канала (т.е создание полупрозрачных изображений)
3. Гамма-коррекция
4. Двумерная чересстрочная прогрессивная развертка.

Впрочем, для веб-мастера наиболее интересным из этого списка является поддержка альфа-прозрачности, т.к это дает несравненно большие возможности при оформлении страницы, нежели формат GIF.  Использование PNG позволяет получить мягкие сглаженные контуры, полупрозрачные изображения, за которыми можно красиво размещать текст, аккуратные тени, возможность использования одного и того же изображения для имитации, например, скругленных уголков для различных элементов на странице, возможность размещать под полупрозрачными картинками текст…. Все бы хорошо, но Microsoft Internet Explorer до седьмой версии не поддерживает 24-битную прозрачность. Посмотрим, как можно обойти эту досадную ошибку в наиболее распространенном браузере.

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

<div id=”alpha”>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ullamcorper nunc eu odio. Donec quam. Integer eu dolor. Duis faucibus, lectus in egestas laoreet, sem risus suscipit turpis, et tincidunt lorem odio et erat. </p>
  </div>

 В стилях мы пишем, что:

 #alpha {
            background: url(bg.png) no-repeat;
            width: 255px;
            height: 150px;
}
 

Данный код позволит получит нам прекрасное полупрозрачное изображение на странице. Но не в Internet Explorer 6.0 и ниже. Для получения аналогичного эффекта в IE можно прибегнуть к следующей хитрости. Для этого нужно добавить в наш css строчки:

_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='crop');

Получаем следующий код:

#alpha {
            background: url(bg.png) no-repeat;
            width: 255px;
            height: 150px;
           _background: none; /* специально для IE */
           filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='crop');
}

Необходимо отметить, что указание ширины и высоты элемента кроме выполнения своей непосредственной функции является также своеобразным переключателем для Internet Explorer, т.к для работы фильтра требуется, чтобы элемент имел свойство layout, включение которого производится либо через указание высоты и ширины элемента, либо через присвоение position: absolute, или же через присвоение display: inline-block (что очень выручает в случаях, когда указание ширины-высоты и абсолютное позиционирование не подходят). В результате у нас на странице должно появится  аккуратное полупрозрачное изображение.

Надо отметить, что данный способ не единственный, позволяющий полноценно отображать png-файлы в Internet Explorer, но все известные мне способы основаны на использовании AlphaImageLoader Filter. В зависимости от ситуации и поставленной цели можно выбирать различные из них.

Описание работы фильтра AlphaImageLoader Filter