Как в браузере IE6 установить фоновую картинку с прозрачностью в формате PNG?

🕛 23.01.2009, 00:34
Браузер Internet Explorer 6 (IE6) имеет известные проблемы с отображением фонового изображения с прозрачными участками в формате PNG-24. Поэтому для этого браузера применяют атрибут filter, который не входит в спецификацию CSS, но зато прекрасно понимается IE6. 
Добавление фонового рисунка рассмотрим на примере изображения, которое содержит многоуровневую прозрачность (рис. 1).



Рис. 1. Изображение с альфа-каналом

Вывод фоновой картинки происходит с помощью атрибута background со значением url, как показано в примере 1.

Пример 1. Отображение фоновой картинки

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Фоновая картинка</title> <style type="text/css"> BODY { background: #FFE79E url(images/warning.png) 10px 20px no-repeat; /* Параметры фона */ } .warning { padding: 10px 10px 0 270px; /* Поля вокруг текста */ } </style> </head> <body> <div class="warning"> Работа оператора ПЭВМ относится к категории работ, связанных с опасными и вредными условиями труда. В процессе труда на оператора ПЭВМ оказывают действие следующие опасные и вредные производственные факторы: физические, химические, биологические и психофизиологические. </div> </body>
</html>В данном примере к селектору BODY добавляется одновременно цвет фона и фоновое изображение, которое сдвигается несколько вправо и вниз относительно исходного положения. Чтобы рисунок не повторялся, используется значение no-repeat атрибута background. За счет включенной прозрачности рисунок можно поместить на любой фон, на качестве это никак не отразится. 

Результат примера в браузере Opera показан на рис. 2. Тот же пример в IE6 выглядит иначе (рис. 3).



Рис. 2. Фоновая картинка в браузере Opera



Рис. 3. Фоновая картинка в браузере Internet Explorer 6

Восстановление прозрачности в IE6 происходит с помощью атрибута filter, который добавляется к элементу с фоновым рисунком, в нашем случае это BODY.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="warning.png", sizingMethod="image");

Значением параметра src служит путь к графическому файлу, а sizingMethod может принимать следующие значения:

crop - кадрировать изображение по размерам области; 
image - вывести одной картинкой; 
scale - масштабировать по размерам области. 
Поскольку нам требуется только вывести рисунок, используем значение image, как показано в примере 2.

Пример 2. Стиль для IE6 

<style type="text/css"> BODY { background: #FFE79E; height: 92%; /* Высота страницы */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="warning.png", sizingMethod="image"); }
</style>Вначале необходимо скрыть фоновый рисунок, оставив только цвет фона. С этой задачей справляется атрибут background. В IE6 также наблюдается особенность, связанная с высотой страницы. Картинка будет показываться не целиком, а по высоте, соответствующей высоте контента. Если текста мало, то рисунок будет обрезан снизу. Чтобы этого не произошло, устанавливаем высоту страницы через атрибут height. Значение подбирается опытным путем. 

Окончательно добавляем стиль в наш HTML-код, закрывая его от других браузеров с помощью условных комментариев (пример 3).

Пример 3. Отображение фоновой картинки в IE6

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Фоновая картинка</title> <style type="text/css"> BODY { background: #FFE79E url(images/warning.png) 10px 20px no-repeat; } .warning { padding: 10px 10px 0 270px; /* Поля вокруг текста */ } </style> </head> <body> <!-[if lte IE 6]> <style type="text/css"> BODY { height: 92%; /* Высота страницы */ background: #FFE79E; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="images/warning.png", sizingMethod="image"); } </style> <![endif]-> <div class="warning"> Работа оператора ПЭВМ относится к категории работ, связанных с опасными и вредными условиями труда. В процессе труда на оператора ПЭВМ оказывают действие следующие опасные и вредные производственные факторы: физические, химические, биологические и психофизиологические. </div> </body>
</html>При использовании атрибута filter для IE6 примите во внимание, что с его помощью не получится выводить фоном повторяющиеся рисунки. Можно отображать только одиночные картинки без всякого повторения.