|
Боремся с прозрачностью PNG в IE
Одним из самых полезных свойств фармата PNG, является наличие alpha канала, который позволяет задавать степень прозрачности изображения. Данное свойство позволяет значительно облегчить труд дизайнера, при верстке страниц. Но как и у всего хорошего, есть один существенный недостаток.
Все браузеры, умеют работать с альфа каналом. И практически все делают это по умолчанию, не обременяя голову программиста дополнительными трудностями. Все. За исключением Internet Exploer версии 5 и 6. В нем есть обработчик, но чтобы он заработал, надо его принудительно "включить".
Сделать это можно несколькими способами. Рассмотрим один из них. Пусть у нас есть исходное изображение в формате PNG, часть изображения сделаем полупрозрачной.
Смотрим в эксплоере. Под надписью должна была бы быть тень и белый фон. Но её там нет(((.
Чтобы сделать изображение, похожим на действительность, надо включить свойство DXImageTransform-AlphaImageLoader и сделать изображение в качестве фонового, а исходное заменить на пустышку. При всем при этом учитываем, что обработчик должен срабатывать, только в IE. На первый взгляд немного сложно, но это не так.
С перва напишем небольшую функцию, в которой будет обрабатываться стиль изображения.
function alpha_PNG(el)//в качестве параметра передаем значение свойств изображения
{
if(/MSIE (5\.5|6).+Win/.test(navigator.userAgent)){//проверяем, что обратился IE
var src;
if(el.tagName=='IMG'){//если исходный элемент был изображением
if (/\.png$/.test(el.src)){//и имел расширение png
src = el.src;//сохраняем значение
el.src = "/blank.gif"; // и заменяем пустышкой
}
}else{//если к примеру был фоновый рисунок
src = el.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);//берем значение фонового изображения
if(src){//если есть
src = src[1]; //соответственно сохраняем
el.runtimeStyle.backgroundImage="none";//и убираем
}
}
if (src) el.runtimeStyle.filter = progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}//включаем альфа канал
}
Осталось только запустить функцию. Для простоты и красоты, будем запускать прямо из css свойств. В описании стилей, создадим новый стиль и назовем его к примеру alpha_png.
.alpha_png{
filter:expression(alpha_PNG(this));
z-index:70;
}
.alpha_png a{position:relative;}
Свойство filter позволяет определить стиль, expression задает выражение, которое будет выполняться для получения значения фильтра.Второй стиль для ссылок, необходим чтобы изображение "не убегало".
Так же необходимо в свойствах тега IMG задать исходные размеры изображения, иначе его не будет видно ;)
Собственно все, осталось, только вставить нужное изображение в код сайта.
<img src="/images/alpha.png" class="alpha_png" width="300px" height="100px">
Если все сделано правильно, то результат должен получится примерно таким.
blank.gif - это прозрачный гиф размером 1 на 1 пиксель.
Опубликовано: 2008-05-22 20:06:44 ShadX
Комментарии
| Евгений |
А я просто в фотошопе в gif переделываю
|
|
|
Оставить комментарий:
|
|
|
Материалы
Прозрачность PNG в IE