Прозрачный PNG в IE6 с ручной обработкой
Справочники
Прозрачный PNG в IE6 с ручной обработкойПроблема прозрачности PNG изображений в браузере Internet Explorer 6 и 5.5 по сей день беспокоит многих WEB-мастеров и не дает спокойно жить. Проблема заключается в том, что IE 6 не может отображать прозрачность в PNG-файлах. Поэтому мастерам приходится идти на некоторые ухищрения, чтобы их дизайн смотрелся на всех браузерах одинаково.
Это продолжение статьи, начало которой вы можете прочитать по следующей ссылке: проблема прозрачности PNG в IE6.
В этой части статьи мы опишем, как можно решить проблему с прозрачностью PNG-изображений в браузере IE 6 и IE 5.5 при помощи ручной верстки.
Этот вариант удобен тем, кто только начал писать дизайн на PNG файлах с прозрачностью. В этом варианте не используется ни один JavaScript. Но в случае отказа от фильтров, придется перебирать весь код сайта.
Суть метода - прописывать элементам дизайна, которые содержат прозрачный PNG, уникальный ID, и в CSS прописывать фильтры к каждому ID. Пример:
#pngImg1{background-image:url(http://szenprogs.ru/img/sys/logo.png); width:300px; height:100px;}
#pngDiv2{background-image:url(http://szenprogs.ru/img/sys/logo.png); width:300px; height:100px;}
</style>
<!--[if lt IE 6.]-->
<style type="text/css">
#pngImg1{background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://szenprogs.ru/img/sys/logo.png', sizingMethod='scale');}
#pngDiv2{background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://szenprogs.ru/img/sys/logo.png', sizingMethod='scale');}
#pngDiv2 a{position:relative;}
</style>
<!--[endif]-->
<img id="pngImg1" src="http://szenprogs.ru/img/sys/trans.gif" alt="PNG в IMG">
<div id="pngDiv2">
Фоновый PNG
</div>
Изображение trans.gif - это однопиксельный рисунок. Конструкция #pngDiv2 a{position:relative;} требуется для восстановления работоспособности ссылок в блоке с прозрачным PNG.
ВНИМАНИЕ! Блок, который использует прозрачный рисунок и содержит ссылки не должен быть позиционирован при помощи position: absolute или position: relative. В этом случае ссылки работать не будут!
Если все сделано правильно, то прозрачные области PNG-рисунков и фонов у вас должны отобразиться.
В следующем материале я опишу, как можно добиться отображения прозрачности PNG в IE 6 при помощи HTC файла от TwinHelix.
Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Прозрачный PNG в IE6 с ручной обработкой
Справочники
Скрипты, инструкции, справочники
| Категория: | Справочники |
| Просмотрено: | 6315 |
| Рейтинг: | 4.0/3 |
| Дата добавления: | 2011-04-25 19:27, Понедельник |
| Добавил: | Szen |
| Теги: | PNG, дизайн, transparent, прозрачность, IE6 |
Рекомендуем
Дополнительно к Прозрачный PNG в IE6 с ручной обработкой
Мини-форум
| № 0 | 2011-04-25 19:27 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Прозрачный PNG в IE6 с ручной обработкой". |
| Гость |
