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

Справочники

Рисунок Прозрачный PNG в IE6 с ручной обработкой
x;z-index:1 }
Прозрачный PNG в IE6 с ручной обработкой Прозрачный PNG в IE6 с ручной обработкой
оценка: 4.0 из 5
оценок: 3

Проблема прозрачности 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


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

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

Мини-форум

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

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

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



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2024 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz