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-я версия давно архаична, что уж говорить про более раннюю.

Добавить комментарий для Евгений Молодецкий Отменить ответ

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.