Evgeny Pavlov

Уже, наверное, все знают, что изображения в формате PNG с прозрачностью плохо отображаются в некоторых браузерах. Хотя... на самом деле можно рассматривать только Internet Explorer 6 и частично Internet Explorer 7.

Конечно же, почти все веб-разработчики знают, как решить данную проблему: достаточно «подцепить» специальный скрипт или файл стилей, чтобы всё исправить. Раньше я как раз и использовал решение на JavaScript, но оно не справлялось совершенно с прозрачностью в фоновых изображениях.

Недавно я нашёл отличное решение, для использования которого требуется всего лишь немного CSS и прозрачное однопиксельное GIF-изображение.

Итак, достаточно вставить следующий код на страницы, где необходима поддержка PNG с прозрачностью, чтобы всё заработало:

* html img,
* html .png {
  azimuth: expression(
    this.pngSet?
      this.pngSet=true :
        (this.nodeName == "IMG" ?
          (this.src.toLowerCase().indexOf('.png')>-1 ?
            (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
                this.src = "/images/blank.gif") :
            '') :
          (this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
            (this.origBg = (this.origBg) ?
              this.origBg :
              this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
              this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
              this.runtimeStyle.backgroundImage = "none") :
            ''
        ), this.pngSet=true
  );
}

— да, надо не забыть положить прозрачный GIF blank.gif в папку images (или изменить путь в CSS).

Теперь можно использовать PNG с прозрачностью также, как и обычные изображения. Если вы привыкли пользоваться классом png для таких изображений, то можно ничего не менять.

Изначально это решение было предложено на блоге komodomedia (там же можно посмотреть примеры работы), которое затем было немного модифицировано в блоге Pluit Solutions. Я же воспользовался этим в своём блоге t!, где требовалась прозрачность для фона.

Метки: background, CSS, GIF, IE6, javascript, PNG, прозрачность, прозрачность PNG, фон