PNG-прозрачность с использованием expression
25.02.2010 | Написав eugenem
Создаем однопиксельный прозрачный 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 не проверяли, а то ведь есть и такие посетители 🙂