![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Способы использования PNG
При использовании PNG в качестве фонового рисунка надо учитывать, что IE версий ниже 7 (далее под IE понимается IE≤ 6) не понимает прозрачность в PNG. Для реализации в IE надо использовать фильтр: CSS для отображения PNG 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 для отображения PNG 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 для отображения PNG теней < 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 для отображения PNG теней .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 – тоже никак не реализуется средствами непосредственно фильтра. Но если Важно не забывать всегда обрабатывать готовые PNG-файлы программой pngout.exe (см. 0)
|