Использование прозрачных 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-индекса.

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

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