PNG прозрачность в IE6
05.06.2007 браузеры, верстка, css
Долго искал простейшее и универсальное решение использовать png прозрачность в Interner Explorer 6. Причем интересовало и для обычных изображений, и для фона.
Порядок следующий:
- Скачиваем iepngfix.htc, рисуем прозрачный однопиксельный .gif, называем его как угодно.
- Проверяем и корректируем путь к нашему прозрачному изображению в iepngfix.htc
- Вставляем в условные комментарии ссылку на стиль или сам стиль:
#header { behavior: url(iepngfix.htc); } /* для фона */
img, #header { behavior: url(iepngfix.htc); } /* для фона и всех изображений */
img { behavior: url(iepngfix.htc); } /* для всех изображений */
- Наслаждаемся
Похоже ИЕ не воспринимает относительные пути для .htc, поэтому записывать данное св-во нужно в виде /css/iepngfix.htc, а точнее путь скрипта нужно прописывать относительно html документа, а не относительно .css файла.
Недостатки:
- Невозможно разможить фоновое изоражение отдельно по осям x- и y-
- Невозможно задать положение фона
Взято здесь — IE PNG Fix v1.0 RC4
С использованием expression
Понадобится однопиксельный .gif. Работает аналогично. Недостатки те же + наличие expression в 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 ); }
css png image fix for ie