Способы использования PNG, в том числе для отображения теней

При использовании PNG в качестве фонового рисунка надо учитывать, что IE версий ниже 7 (далее под IE понимается IE≤6) не понимает прозрачность в PNG. Для реализации в IE надо использовать фильтр:

CSS:

div{

background:url(image.png);

}

* html div{

background:none;

filter:progid:dximagetransform.microsoft.alphaimageloader(src='image.png', sizingmethod='crop');

}

Важно!Параметр src указывается относительно страницы, а не CSS, т.е. если css-файл лежит в папке CSS, a image.png в IMAGES, то код будет выглядеть так:

CSS:

div{

background:url(../images/image.png);

}

* html div{

background:none;

filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/image.png', sizingmethod='crop');

}

В то же время, если поместить в контейнер, например, ссылку, то в IE ссылка не будет рабочей, т.к. фильтр перекроет собой ссылку. У этой проблемы есть два варианта решения: либо вырезаем в PNG на месте ссылки дыру и тогда фильтр пропустит фокус на ссылку, либо назначаем ссылке свойство position:relative и ссылка, образно выражаясь, поднимется выше фильтра и станет активна. Второй вариант, как правило, наиболее приемлем им и будем пользоваться.

При использовании PNG в качестве тянущегося фона (тени):

в строке filter:progid… необходимо указывать параметр sizingmethod='scale', в этом случае изображение будет растянуто по размеру всего блока. И снова все дочерние блоки окажутся перекрыты фильтром и ссылки не будут активными. Указываем первому дочернему блоку position:relative и проблема решается.

HTML:

<div class="shadow">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis risus. Nam et <a href="#">ipsum ut justo</a> condimentum… </p>

<p>Nullam sit amet libero. Pellentesque… </p>

</div>

CSS:

.shadow{

width:410px;

background:url(shadow.png) repeat-y;

padding:5px 0 100px;

margin:0 auto;

}

* html .shadow{

background:none;

filter:progid:dximagetransform.microsoft.alphaimageloader(src='shadow.png', sizingmethod='scale');

}

.shadow p{

position:relative;

margin:0 20px 16px;

font:11px/16px solid tahoma,sans-serif;

}

Следующий момент надо запомнить, как догму и при использовании фильтра в IE всегда учитывать: так как фильтр в IE не является полноправным заменителем свойства background, то и ни один из параметров этого свойства на него не распространяется:

-repeat – номинально заменяется методом sizingmethod, но:

при значении scale изображение растягивается, а не повторяется,

при значении crop изображение обрезается, по размеру блока;

-position – не работает совсем, невозможно позиционировать изображение относительно блока;

-color – тоже никак не реализуется средствами непосредственно фильтра. Но если
вместо background:none указать background:red, то под изображением
затеплится красный фон.

Важно не забывать всегда обрабатывать готовые PNG-файлы программой pngout.exe (см. 3.4)