» Хитрости CSS » Прозрачность PNG в IE6

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

Начну статью с того, что поведаю вам, дорогие читатели, о том, что я очень уж люблю формат изображений PNG. Во-первых, он по объему часто занимает куда меньше места, чем тот же JPG, и у него есть одна приятная особенность, о которой читайте дальше.
Часто при создании дизайна веб-страниц требуются изображения с прозрачным фоном, а на это способны только два формата: GIF и PNG. Расскажу об обоих форматах по-немногу:
GIF позволяет сохранять анимированные изображения, а также поддерживает прозрачность. Но прозрачность не имеет больших возможностей. Тут пиксел либо прозрачный, либо нет, из-за чего изображения часто получаются угловатыми, с некрасивым неровным фоном, белыми краями...
Другая ситуация с PNG: благодаря наличию альфа-канала, изображение поддерживает до 256 уровней прозрачности! То есть возможна не тольк полная прозрачность, но и полупрозрачность разной "силы". То есть тут возможны плавные переходы изображения в фон, что открывает широкий простор для дизайнерских решений.
Но есть одна проблема: браузеры IE версии 6 и ниже не допускают прозрачности PNG вообще. То есть любой браузер показывает все замечательно, а этот просто-напросто делает серый фон, портящий весь дизайн.
Я очень долго искал способ решения этой проблемы и наконец-то нашел.

Для "подчинения" творения мелкомягких мы будем использовать javascript.

Вначале в корневом каталоге сайта создаем файл и называем его, например, iepngfix.htc со следующим содержанием:

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script type="text/javascript">
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;

// Путь к прозрачному однопиксельному рисунку в формате GIF
var blankSrc = "transparent.gif";

if (supported) fixImage();
function propertyChanged() {
   if (!supported) 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) {
      element.src = blankSrc;
      return;
   }
   if (! new RegExp(blankSrc).test(src)) {
      realSrc = src;
   }
   if (/\.png$/.test(realSrc.toLowerCase())) {
      element.src = blankSrc;
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
   }
   else {
      element.runtimeStyle.filter = "";
   }
}
</script>
</public:component>

Туда же засовываем файл transparent.gif, размером 1х1 пиксел. Он должен быть прозрачным (будет использоваться как подложка, для создания прозрачности).

После тега BODY вставляем:

(CSS-хак необязателен, просто атрибут behavior не входит в спецификацию CSS, да и понимается только браузерами IE)

Теперь при вставке png-изображения с прозрачными участками нужно использовать код:

И если вы все сделали правильно, png будут замечательно отображаться во всех браузерах. Вперед к новым дизайнерским решеням!

Хочу заметить, что параметры ширины и высоты при использовании класса "png" задавать нужно обязательно, иначе скрипт просто сожмет ваше изображение до невидимых размеров.

Здесь тебе на райсобес - Подпишись на RSS!

Уважаемый посетитель, вы зашли на сайт как незарегистрированный пользователь. Оставленные комментарии отправляются на модерацию. После регистрации появится возможность попасть в список Комментаторов.