Прозрачный PNG в IE6 с ручной обработкой

Справочники

Рисунок Прозрачный PNG в IE6 с ручной обработкой
Прозрачный PNG в IE6 с ручной обработкой Прозрачный PNG в IE6 с ручной обработкой
оценка: 5.0 из 5
оценок: 2

Проблема прозрачности PNG изображений в браузере Internet Explorer 6 и 5.5 по сей день беспокоит многих WEB-мастеров и не дает спокойно жить. Проблема заключается в том, что IE 6 не может отображать прозрачность в PNG-файлах. Поэтому мастерам приходится идти на некоторые ухищрения, чтобы их дизайн смотрелся на всех браузерах одинаково.

Это продолжение статьи, начало которой вы можете прочитать по следующей ссылке: проблема прозрачности PNG в IE6.

В этой части статьи мы опишем, как можно решить проблему с прозрачностью PNG-изображений в браузере IE 6 и IE 5.5 при помощи ручной верстки.

Этот вариант удобен тем, кто только начал писать дизайн на PNG файлах с прозрачностью. В этом варианте не используется ни один JavaScript. Но в случае отказа от фильтров, придется перебирать весь код сайта.

Суть метода - прописывать элементам дизайна, которые содержат прозрачный PNG, уникальный ID, и в CSS прописывать фильтры к каждому ID. Пример:

Code
<style type="text/css">
  #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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Прозрачный PNG в IE6 с ручной обработкой
Справочники
Скрипты, инструкции, справочники

rss
Категория:Справочники
Просмотрено:4971
Рейтинг:5.0/2
Дата добавления:2011-04-25 19:27, Понедельник
Добавил:Szen
Теги:PNG, дизайн, Transparent, Прозрачность, IE6

Мини-форум

№ 02011-04-25 19:27
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Прозрачный PNG в IE6 с ручной обработкой".
Гость
Учавствовать в обсуждении "Прозрачный PNG в IE6 с ручной обработкой" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что бы вы хотели изучить?
Всего ответов: 255
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 7
Гостей: 6
Пользователей: 1

SergeyDut
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz