CSS практик

CSS. Прозрачность

Posted by: fxix on: Октябрь 23, 2008

В: Uncategorized
Комментарии выключены

1. Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Для установки прозрачности через скрипт используем: object.style.opacity

2. Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity

Для установки прозрачности через скрипт используем: object.style.MozOpacity

3. Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity

Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity

Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):

.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* синтаксис IE5.5+ (является предпочтительным) */
.img2 { filter: alpha(opacity=50); } /* синтаксис IE4 */
Для установки прозрачности через скрипт используем: object.style.filter = «progid:DXImageTransform.Microsoft.Alpha(строка параметров)». Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение «opacity=число от 0 до 100″.

4. CSS opacity симбиоз
Под симбиозом я подразумеваю объединение разных стилей для разных браузеров в одном CSS правиле для получения нужного эффекта, т.е. для реализации кросс-браузерности.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 – Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).

5. Javascript opacity симбиоз

Теперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше.

function setElementOpacity(sElemId, nOpacity)
{
var opacityProp = getOpacityProperty();
var elem = document.getElementById(sElemId);

if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью

if (opacityProp==»filter») // Internet Exploder 5.5+
{
nOpacity *= 100;

// Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter
var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += «progid:DXImageTransform.Microsoft.Alpha(opacity=»+nOpacity+»)»; // Для того чтобы не затереть другие фильтры используем «+=»
}
else // Другие браузеры
elem.style[opacityProp] = nOpacity;
}

function getOpacityProperty()
{
if (typeof document.body.style.opacity == ’string’) // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9)
return ‘opacity’;
else if (typeof document.body.style.MozOpacity == ’string’) // Mozilla 1.6 и младше, Firefox 0.8
return ‘MozOpacity’;
else if (typeof document.body.style.KhtmlOpacity == ’string’) // Konqueror 3.1, Safari 1.1
return ‘KhtmlOpacity’;
else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) // Internet Exploder 5.5+
return ‘filter’;

return false; //нет прозрачности
}

Функция принимает два аргумента: sElemId – id элемента, nOpacity – вещественное число от 0.0 до 1.0 задающее прозрачность в стиле CSS3 opacity.

Думаю, что стоит пояснить часть кода функции setElementOpacity относящуюся к IE.

var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;

if (oAlpha) oAlpha.opacity = nOpacity;
else elem.style.filter += «progid:DXImageTransform.Microsoft.Alpha(opacity=»+nOpacity+»)»;

Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству elem.style.filter = ‘…’;? Зачем используется «+=» для добавления в конец строки свойства filter? Ответ прост, для того чтобы не «затереть» другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: elem.filters (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде.

6. Плавное изменение прозрачности элемента

Готовое решение. Используем библиотеку opacity.js
<html>
<head>
<!– Устанавливаем изначальную прозрачность картинок –>
<style type=»text/css»>
img {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>

<!– Подключаем библиотеку –>
<script type=»text/javascript» src=»/js/opacity.js»></script>

</head>
<body>

</body>
</html>

Основные шаги:

1. Подключаем библиотеку функций;
2. Определяем правила;
3. Вызываем метод fadeOpacity() для перетекания цвета от начального к конечному, или fadeOpacity.back() для возврата к начальному цвету.

Разжевываем

Как подключать библиотеку, думаю, видно из примера выше. Теперь стоит пояснить определение правил. До того как вызывать методы плавного изменения прозрачности, нужно определить правила, по которым будет выполняться процесс: нужно определить начальную и конечную прозрачность, а также, при желании, указать параметр задержки, который влияет на скорость процесса смены прозрачности.

Правила определяются с помощью метода fadeOpacity.addRule

Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Аргументы:

* sRuleName – имя правила, задаётся произвольно;
* nStartOpacity и nFinishOpacity – начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
* nDelay – задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).

Сам вызов фейдинга прозрачности делаем через методы fadeOpacity(sElemId, sRuleName), где sElemId это id элемента, а sRuleName имя правила. Для возврата прозрачности в исходное состояние используется метод fadeOpacity.back(sElemId).
:hover для простой смены прозрачности

Ещё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши.

<a href=»javascript:void(0)»> <img src=»/images/articles/strawberry.jpg» width=»100″ height=»80″ /> </a>
Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено).
Прозрачность и зазубренный текст в IE

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст – bold, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

7. САМОЕ ХОРОШЕЕ РЕШЕНИЕ

Что-ж, внимательно все обдумав и взвесив все за и против я пришел к следующему мнению:
- мне не нужен “лишний” JavaScript или довесок ввиде компоненты;
- HTML код страниц должен быть максимально “нетронутым”, т.е. не содержать в себе ничего лишнего;
- на будущее, уход от поддержки IE6, и избавление от невалидных трюков, должен быть простым и безболезненным

В итоге родилось абсолютно неоригинальное, но сподручное, решение очень похожее на третий подход.

При вставке PNG изображения в разметку страницы обрамляем его тэгом <div> с каким-либо уникальным id

Данный код “практически не содержит ничего лишнего” и корректно отработает картинку во всех нормальных браузерах, а наличие div c id позволит обработать картинку для IE6, но об этом позже.

С фоновым PNG для блоков еще проще – совсем ничего лишнего:

Все, остаемся верными принципу максимальной “нетронутости”. Поле для работы готово, теперь займемся его обработкой через CSS, так как была договоренность: JavaScript не использовать.

Что-бы соблюсти третий пункт о простом уходе с невалидного CSS отделяем его от основного:

В основном оставляем только обработку фоновых PNG:

html>body #bgpng1 {

background: url(bgsample.png) no-repeat;

}

А в дополнительный, вот таким образом:

<!–[if lte IE 6]>

<![endif]–>

выносим (что-бы в дальнейшем было легко от него отвязаться) все “шаманские заклинания” для IE6. Вот его содержимое pngfix.css:

#png1 {

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’sample.png’, sizingMethod=’scale’);

width:100px;height:100px;

}

#png1 img { display:none; }

#bgpng1 {

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’bgsample.png’, sizingMethod=’scale’);

}

А теперь, для лучшего укладывания в голове, пример целиком (картинки подставьте по Вашему желанию):

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>PNG in action!</title>

<!–[if lte IE 6]>

@import url(”pngfix.css”);

</style>

<![endif]–>

html>body #bgpng1 {

background: url(bgsample.png) no-repeat;

}

</style>

</head>

<body>

</body>

</html>

Вот здесь живой пример. Между прочим Markup Validation Service говорит, что: This Page Is Valid XHTML 1.0 Transitional!, так что условные комментарии от Microsoft картину не портят, чего не скажешь о внешнем CSS.

Все это довольно коряво и не очень красиво, но думаю что с ростом доли IE7 среди браузеров, PNG будет постепенно занимать свою нишу, отбирая у GIF формата обжитые места где используется прозрачность. Задумываться о будущем необходимо уже сейчас, тем более когда существуют возможности его полноценного применения.

http://handynotes.ru/2007/10/png-ie6.html#p66

8. какая то другая прозрачность

filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;

IE. PNG

Posted by: fxix on: Октябрь 23, 2008

В: Uncategorized
Комментарии выключены

1. Показываем полупрозрачные-PNG в IE.

через CSS:

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg.png', sizingMethod='scale');

через javascript:

 document.getElementById('тэг\класс\дескриптор').style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg.png', sizingMethod='scale')";

sizingMethod говорит что делать, если изображение не соответствует размерам элемента в который оно загружается и имеет 3 возможных значения:
-crop – обрезать изображение если оно больше размеров объекта родителя
-image – увеличить или уменьшить объект по размеру изображения; значение по умолчанию
-scale – изменить масштаб изображения по размеру родителя
Требование фильтра: у элемента, к которому он применяется должно быть или height, или width, или position:absolute, или writingMode:tb-rl, или contentEditable:true.
Разница между фильтром и обычным фоном – если у фона есть свойства background-position, background-repeat, background-attachment итд, то у фильтра их НЕТ!
Мало просто загрузить изображение фильтром, также нужно убрать основное изображение, которое воспроизводиться IE без прозрачности и будет мешать отображаться правильному изображению.

Два случая:
1. Изображение представлено тэгом IMG
2. Изображение является фоном какого-то элемента.

В обоих случаях нужен фильтр AlphaImageLoader, но в случае тэга IMG – нужно избавиться от содержимого элемента (переднего плана) , а во втором случае – нужно избавиться от фона.
От фона избавится весьма просто, задав свойству background-image значение «none».
Для IMG нужно заменить исходное изображение прозрачным однопиксельным gif-ом, тогда сквозь него мы увидим png-картинку, загруженную фильтром.

Реализация:

 селектор { filter:expression(fixPNG(this)); }

В качестве селектора указываете любой CSS селектор. Селектор определяет в каких элементах страницы будут искаться и корректироваться PNG изображения.

-expression() вычисляет выражение внутри скобок и возвращает полученное значение в качестве значения css свойства, к которому эта конструкция применялась. Данная конструкция работает только в IE5.0+, другие браузеры её игнорируют.

Синтаксис:

CSS_свойство: expression( выражение)

где выражение – это валидная строка кода на Javascript или VBSCript.

Пример:

<div style="position: absolute; left: 0; top: expression( body.scrollTop )">Эмуляция position: fixed в IE.</div>

Элемент DIV в примере всегда будет находиться в левом верхнем углу окна браузера, потому что свойству top всегда будет присваиваться новое значение, в зависимости от «проскроллености» страницы.

Конструкция expression( fixPNG(this) ) вызывает функцию fixPNG, а в качестве аргумента ей передается объект к которому в данный момент применяется стиль. Как уже ясно, эта функция и выполняет всю работу по коррекции.

Рассмотрим код этой(fixPNG(this) ) функции:

 <script type="text/javascript">

function fixPNG(element)
 {
 //Если браузер IE версии 5.5-6
 if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
 {
 var src;

if (element.tagName=='IMG') //Если текущий элемент картинка (тэг IMG)
 {
 if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
 {
 src = element.src;
 element.src = "/blank.gif"; //заменяем изображение прозрачным gif-ом
 }
 }
 else //иначе, если это не картинка а другой элемент
 {
 //если у элемента задана фоновая картинка, то присваеваем значение свойства background-image переменной src
 src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
 if (src)
 {
 src = src[1]; //берем из значения свойства background-image только адрес картинки
 element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
 }
 }
 //если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
 if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
 }
 }
 </script>

поясню один момент, а точнее строку кода:

if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";

Эта строка «затирает» начальное значение свойства filter элемента, а именно происходит замена expression( fixPNG(this) ) на простой вызов фильтра AlphaImageLoader. При этом нет нужды возвращать какое либо значение из функции. Сделано это с целью предотвратить постоянные вызовы конструкцией expression() функции fixPNG, это просто не нужно и к тому же экономит ресурсы компьютера.
Так здесь в самый раз воспользоваться конструкцией «behavior», она и код единожды запустит, да выглядит чуть компактнее. Но behavior не подходит и вот почему: вызов «поведения» происходит после отображения объекта страницы, и поэтому вначале появится изображение без прозрачности, а лишь после будет подкорректировано (что визуально заметно пользователю). Это выглядит некрасиво.

Как заставить IE показывать прозрачность? Сперва скопируйте и сохраните в корне своего сайта прозрачный однопиксельный gif и javascript-файл fixpng.js. Затем на своей странице между тэгами <head></head> добавьте это:

<!--[if lt IE 7]>
 <![if gte IE 5.5]>
 <script type="text/javascript" src="/fixpng.js"></script>
 <style type="text/css">
 .iePNG, IMG { filter:expression(fixPNG(this)); }
 .iePNG A { position: relative; }/* стиль для нормальной работы ссылок в элементах с PNG-фоном */
 </style>
 <![endif]>
 <![endif]-->

Если вы НЕ используете PNG в качестве фона, то это все. Если же используете png в качестве фона, то установите аттрибут class=»iePNG» в элементах с PNG-фоном.

Почему не работают ссылки на PNG фоне в IE?

Важно знать, что если применить фильтр AlphaImageLoader к элементу внутри которого находятся ссылки, то эти ссылки перестают работать. Т.е. та часть ссылки, которая находиться на непрозрачной области PNG картинки, ведет себя как обычный текст. Для того, чтобы решить данную проблему, следует установить этим ссылкам относительное позиционирование

position: relative;

В примере выше это реализовано как .iePNG A { position: relative; }. Однако, нужно учесть, что при этом элемент к которому применен AlphaImageLoader-фильтр не должен быть спозиционирован ни абсолютно, ни относительно (т.е. у него не должно быть position: absolute или position: relative), иначе ссылки все равно не будут работать. Для того чтобы заставить работать ссылки в блоке с фильтром и позиционированием нужно разделить позиционирование и фильтр: следует создать внешний блок к которому применить позиционирование, а во внутреннем блоке установить фильтр.

<div style="position: relative;"> //для позиционирования отдельный внешний блок
 //для фона отдельный внутренний блок
 <div class="iePNG" style="background-image: url(image.png); height: 142px; width:165px;">А это пример <a href="#">ссылки на PNG фоне...</a>.</div>
 </div>

Почему PNG темнее в IE?

В IE есть ещё одна «особенность» связанная с отображением PNG (PNG24), проявляющаяся в более темном отображении изображения. Причиной этому служит записанная в файл изображения дополнительная информация о гамма коррекции (chunk gAMA) (например, тот же Photoshop добавляет эту информацию). Для решения проблемы нужно «почистить» PNG-файл от gAMA chunk. Сделать это просто с помощью утилиты pngout (использовать так: pngout.exe in.png out.png). Так же можно воспользоваться и утилитой TweakPNG.

PNG в IE7 + CSS прозрачность (opacity)

Хоть в IE7 и появилась поддержка PNG-24 с 8-битным альфа-каналом прозрачности, однако она не лишена сюрпризов. Если к полупрозрачному PNG изображению применить CSS свойство opacity (прозрачность), то полноценный 8-битный альфа-канал превращается в обычную 1-битную прозрачность (такую как в GIF или PNG-8): полностью прозрачные пикселы изображения так и остаются полностью прозрачными, а остальные накладываются на черный фон и конечно перестают быть прозрачными вообще. Для того чтобы избежать этого нужно как и раньше использовать старый добрый фильтр AlphaImageLoader. Ещё отмечу, что в IE7 так и не появилась нормальная CSS прозрачность (свойство opacity), а по прежнему используется фильтр Alpha DirectX.
2. PNG vs Gif

Хм. в гимпе png9 с макс. сжатием(9) и в фотошопе png24 одинаковы по размеру файлы. Gif файл в два раза меньше.
GIF эффективно сжимает только горизонтальные одноцветные области. Grayscale и greyscale — равнозначные варианты. Я использовал последний потому, что он указан в спецификации на W3C.
непрозрачные пиксели сохраняем в PNG-8, а полупрозрачные — в PNG-24

Заметил, что многие ребята используют полноцветный PNG (PNG-24 в фотошопе) только для полупрозрачных картинок, а индексированный PNG (PNG-8) — только для картинок с малым количеством цветов. На самом деле, для последнего случая довольно часто бывает более эффективным именно PNG-24.

3.PNG в IE 6. (IE7 поддерживает).
http://www.twinhelix.com/css/iepngfix/
Этот скрипт добавляет почти родной поддержки PNG с альфа-прозрачность в IE 5.5 и 6. Теперь вы можете иметь полную прозрачность и не более уродливые серые границ! Она требует только одну строку в вашем CSS файл, и никаких изменений на вашем сайте HTML. <IMG> Теги и фоновых изображений, так поддерживается.

Файл скрипта версии v1.0 в папке E:\JETFLASH\Web-Template\PNG-optimizer\iepngfix
Файл htmlhttprequest.zip для HTMLHttpRequest v1.0RC1 Preview — basically totally rewritten under the hood. (This script dynamically loads remote documents for parsing and/or insertion into the current document. It uses the XMLHttpRequest browser object as well as its own custom IFRAME-based transport layer for excellent cross-browser compatibility. Files can be loaded just by clicking a link, and loads are fully multithreaded.)
Файд IEPNGFix v2.0 Alpha.zip with background position/repeat!

Совместимость

This uses CSS «behaviors», a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don’t include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).
4. С офф-сайта микрософт.
Фильтр PNG для Internet Explorer 6.0
Не отображается прозрачность в файлах PNG

<!-- This DIV is the target container for the image.  -->
<DIV
STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');" >
</DIV>

Если такое изображение поместить внутрь ссылки, она начинает работать «неправильно». Т. е. ссылка как бы «инвертируется»: прозрачные пиксели становятся кликабельными, а непрозрачные — нет. Причём, неважно, как вставлено изображение, картинкой или фоном.
Решение
Чтобы исправить положение, для элементов, содержащих PNG-изображение (или к которым применён фильтр AlphaImageLoader) нужно присвоить CSS-стиль position: static, а всем дочерним элементам по отношению к нему (в моём примере это ссылки) — position: relative.
Пример:

<h2>Стикер вставлен фоном</h2>
<div id="one" style="position: static; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sticker.png', sizingMethod='scale');">
    <a href="#" style="position: relative"></a>
</div>
<h2>Стикер вставлен картинкой</h2>
<div id="two" style="position: static; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sticker.png');">
    <a href="#" style="position: relative"><img src="sticker.png" width="155" height="158" style="position: relative; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" alt="sticker" /></a>
</div>

Другой метод.
Чтобы не заморачиваться написанием стилей для кроссбраузерности (а для примера выше придётся писать стили отдельно для IE6 и отдельно для «нормальных» браузеров), рекомендую использовать скрипт iepngfix: – http://www.twinhelix.com/css/iepngfix/
способ подключения – http://www.twinhelix.com/css/iepngfix/demo/
Этот скрипт сам исправит вид всех PNG-изображений на странице в IE6, достаточно только будет перечислить их в стилевом листе.
А если PNG фоном нужно то нужен пустой GIF.

AlphaImageLoader “отображает изображение в пределах границ объекта и между фоном объекта и его содержимым”. Другими словами, AlphaImageLoader загружает PNG изображение с его полной прозрачностью, но он загружает его как собственный слой, снизу которого находится содержимое объекта на котором он применяется. PNG изображения, загруженные таким путем, больше действуют как фоновые изображения, чем изображения переднего плана (хотя они в действительности “сидят” сверху фона объекта). Вобщем, Вы просто можете применить AlphaImageLoader в CSS на элементах img и наслаждаться результатом. Сперва будет загружено изображение, прозрачность остается, но затем изображение будет загружено снова – как переднее содержимое объекта – с непрозрачными областями (таким образом “затеняется” Ваша прозрачная версия). Вы не можете использовать прозрачное PNG как фоновое изображение CSS для (X)HTML элемента (скажем, для <div>) и ожидать, что AlphaImageLoader сделает эту работу в Internet Explorer как надо. Помните, что AlphaImageLoader вставляет Ваше изображение между фоном и передним планом объекта. Поэтому, пока он будет грузить Ваше изображение во всей своей прозрачной красе, он также будет продолжать грузить его как фоновое изображение CSS, и без Ваших замечательных полупрозрачных пикселей.

выяснить зачем вместо размеров в пикселях кто-то написал:
width:expression(1); height:expression(1);

Еще метод.
Этот способ, в отличии от других не использует javascript, a основан на .htc скрипте, который нужен нам только для IE 6 и IE 5.5 для корректного отображения полупрозрачности. Скрипт никак не повлияет на остальные браузеры.

Все что нужно сделать для того чтобы скрипт заработал, это прописать в css-файле для IE6 вот эту строку:

img {
behavior: url(iepngfix.htc)
}
Если вы не используете отдельный файл стилей для Интернет Эксплорера с помощью Conditional Comments, рекомендую использовать Star HTML хак:
* html img {
behavior: url(iepngfix.htc)
}

Затем положить сам файл iepngfix.htc туда где вам удобно, в пределах домена (скрипт не может быть вызван с другого домена в целях безопасности), и изменить путь к нему в CSS.

Еще один момент. Для корректной работы скрипта нужен однопиксельный прозрачный blank.gif, который можно взять здесь или сделать самому.

Если однопикслельный gif лежит не в той же папке что и .htc скрипт, то необходимо открыть iepngfix.htc, в начале файла найти строку

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == "undefined") var blankImg = "blank.gif";

И изменить имя файла и путь к нему. Вот и все. Никаких дополнительных настроек и кода не нужно.

Можно спокойно использовать PNG и как картинки и как фоновое изображение в дизайне ваших сайтов.

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

В соответствии с официальной спецификацией Microsoft, AlphaImageLoader отображает изображение в пределах элемента, между его фоном и контентом. Другими словами поведение AlphaImageLoader больше похоже на фоновое изображение, а не на обычное поведение img, хотя и размещается над фоном.

Если вы примените AlphaImageLoader к исходному элементу img он, конечно, будет работать как и положено, на загружаемое поверх изображение без прозрачности закроет результат его работы. То же самое и с применением AlphaImageLoader вместе с исходным фоновым изображением, несмотря на то, что AlphaImageLoader снова работает нормально, но загружаемое за ним фоновое изображение не будет полупрозрачным.
Еще метод.
А теперь, собственно, решение вопроса связанного с прозрачностью в IE. В Internet Explorer 5.5 и 6.0 оказывается есть поддержка прозрачности, но работает она исключительно при использовании так называемых DX-фильтров. Хитрый javascript-код, осуществляющий поиск картинок в html-коде и применяющий к ним соответствующий фильтр прислал мне мой бывший ученик, который нашёл решение, оптимизировал его и использует в своих проектах. Спасибо ему за это.

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version &gt;= 5.5) && (document.body.filters) && version < 7){
    for(var i=0; i&lt;document.images.length; i++)&nbsp;&nbsp; {
        var img = document.images[i]
        var imgName = img.src.toUpperCase()
        if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
            var imgID = "id=\""+img.id+"\""
            var imgClass = "class=\""+img.className+"\""
            var imgTitle = "title=\"" + img.title + "\""
            var imgStyle = img.style.cssText
            var imgStyleNew = "display:inline-block;"
            if (img.align == "left") imgStyleNew = "float:left;" + imgStyleNew
            if (img.align == "right") imgStyleNew = "float:right;" + imgStyleNew
            if (img.parentElement.href) imgStyleNew = "cursor:hand;" + imgStyleNew
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;"
                + imgStyleNew + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                + "(src=\'" + img.src + "\', sizingMethod='scale');" + imgStyle + "\"></span>"
            img.outerHTML = strNewHTML
            i = i-1
        }
    }
}

Подключаете код строкой:

<script defer src="pngfix.js" type="text/javascript"></script>

Где defer означает, что скрипт не будет генерировать какое-либо содержание (например, “document.write”), и браузер может продолжать чтение и вывод html-документа не отвлекаясь на скрипт.

Но это ещё не всё. Данный скрипт ищет в html-коде тэги <img> заключает их в тэги <span> и применяет фильтр уже непосредственно к ним. Но как быть, если вы используете png-картинку в качестве фона блочного тэга и описываете его в css файле? Здесь есть два варианта:

1. Копировать в описание каждого элемента фильтр. Например:

      div#element{
          height: 100px;
          width: 200px;
          background: url(images/element.png);
          background: expression("none");
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/element.png", sizingMethod="scale")
      }

* Ширину и высоту указывать обязательно если вы хотите добавить дополнительный параметр sizingMethod
* background: url(images/element.png); будет работать для всех.
* background: expression(”none”); – отключаем любые скрипты применённые к background.
* Подключаем фильтр и в параметре src указываем адрес картинки.
* Параметр sizingMethod=”scale” указывает на то, как будет отображаться картинка. В данном случае, scale означает растягивание изображения по размеру элемента.

Один ньюанс для WordPress-themes-девелоперов – в src нужно указывать абсолютный путь, например: “/wp-conent/themes/my_theme/images/element.png”. Относительный не работает.
2. Использовать php-скрипт, добавляющий фильтр описаный в первом варианте в css-файл налету. Если найдёте такой скрипт или напишите, дайте знать. ))

CSS практик

CSS. Прозрачность

IE. PNG

Материалы