Имя:
Пароль:
Выслать пароль?  Регистрация
Google

Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Уроки веб дизайна.

Шаблоны wordpress new

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Коммерческие объявления:
Последние статьи:


Использование прозрачных PNG в IE6

Введение

Вам не понадобятся сложные javascript библиотеки, чтобы заставить прозрачную PNG картинку правильно отображаться в Internet Explorer 6. Все, что вам понадобится это соблюдать несколько несложных правил CSS.

Что вам будет нужно

Только лишь ваш любимый текстовый редактор!

Я помню парня, но уже не помню чувств....

Код и объяснения

В первую очередь вставьте прозрачное изображение PNG в ваш HTML код:


<div id="png-holder"><img src="/images/transparent.png" alt="" /></div>

Это прекрасно сработает в Firefox, Safari, и IE7. Чтобы картинка правильно отображалась в IE6, добавьте следующее в ваш файл CSS для IE6:


#png-holder {
	width: 300px;
	height: 150px;
	text-indent: -9999px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='crop');
}

Это правило filter это частный код Microsoft, который заставит IE6 отобразить альфа-прозрачность в PNG - но он сделает это путем создания еще одного бокса поверх всего содержимого страницы и помещения туда PNG файла, что может привести к некорректному отображению. Вот как это выглядит:

Вы должны использовать фильтр на элемент, содержащий PNG, а не на саму картинку. Для этих целей лучше всего подойдет упаковка изображения в тэги DIV или p.

Вы должны задать ширину и высоту для контейнера, которые бы совпадали с шириной и высотой картинки.

Вы должны будете спрятать исходное изображение - отсюда правило - text-indent: -9999px;. То же вы можете сделать и с прозрачным PNG, которое вы назначили в качестве фона для div, используя вместо этого background: none;.

Вы должны использовать полный путь до изображения. Насколько я могу судить этот просто требование фильтра.

Вы можете поставить значение sizingMethod на crop, что будет означать, что если изображение больше размеров его контейнера, выступы будут обрезаны. Или наоборот, вы можете поставить значение на scale, что растянет изображение до размеров контейнера.

Если вы наложите PNG поверх контента вашей страницы, пользователи не смогут перейти ни по одной ссылке под изображением. Это потому, что фильтр создает новый бокс поверх всего, полностью отменяя правила вашего z-индекса.


Оцените, пожалуйста, эту статью:

Рейтинг: 1.8/5 (голосов: 5)

  Опубликовано: 27 августа 2009 | Просмотров: 14651 | Страница для печати  

Читать комментарии [19] на форуме.

Оставить комментарий
Ваше имя:

Проверка на человечность:

Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.


  О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте