PNG-прозрачность с использованием expression

25.02.2010 | Написал

Создаем однопиксельный прозрачный gif с именем transparent.gif. Ложим в корневую папку сайта (если в другую, то нужно поправить путь к файлу в коде ниже). В css прописываем:

* 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 = "transparent.gif"):(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
);
}

А еще этот код можно вынести в отдельный файл png_fix.css и прописать в head условный комментарий:

if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->

А теперь нюансы:

  • в css нужно указывать высоту или ширину блока, имеющего png-фон, иначе его просто не будет;
  • поверх png-картинки не работают ссылки. Чтобы это исправить, нужно указывать ссылкам position: relative.
4 комментария читателей статьи "PNG-прозрачность с использованием expression"
  • Виталий пишет:

    Можно уточнить,для каких версий IE этот прием должен обеспечивать корректную поддержку прозрачных png-фонов? Спасибо.

  • Евгений Молодецкий пишет:

    IE версии 5.5-6

  • Виталий пишет:

    А ниже IE 5.5 не проверяли, а то ведь есть и такие посетители 🙂

  • Евгений Молодецкий пишет:

    В таком случае проблемы индейцев шерифа не волнуют. Я вообще ниже чем ие6 верстку никогда не тестирую. 6-я версия давно архаична, что уж говорить про более раннюю.

Добавить комментарий

Ваш e-mail не будет опубликован.