Разделы

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

Метки:

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

Добавление фонового рисунка рассмотрим на примере изображения, которое содержит многоуровневую прозрачность (рис. 1).

Рис. 1

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

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

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

<!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(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

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

Рис. 3

Рис. 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

<!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(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="warning.png", sizingMethod="image");
    }
   </style>
  <![endif]-->
   <div class="warning">
    Работа оператора ПЭВМ относится к категории работ, связанных с опасными 
    и вредными условиями труда. В процессе труда на оператора ПЭВМ оказывают 
    действие следующие опасные и вредные производственные факторы: 
    физические, химические, биологические и психофизиологические.
   </div>
 </body>
</html>

При использовании атрибута filter для IE6 примите во внимание, что с его помощью не получится выводить фоном повторяющиеся рисунки. Можно отображать только одиночные картинки без всякого повторения.

Прикрепленный файл	Размер
example-156.zip	35.32 кб

Автомобилист, 17.09.2009

Красиво получилось... Не знаю как остальным, но мне нравится. Кстати, как подписаться чтобы мне на электронный ящик приходило, если кто-то ещё оставил комментарий?

Алексей, 17.12.2009

Пробовал воспользоваться Вашим способом, все работает за исключением одной неприятной вещи - почему-то у меня ИЕ6 перестает понимать width и height в стилях. Я создаю див, прописываю для него обычные стили и стили для ИЕ6, эксплорер вместо нормальной ширины и высоты делает див размером с картинку в фильтре, а я бы туда хотел поместить контент еще некоторый... Никто не сталкивался с таким?

Mike, 25.12.2009

Владимир, 22.08.2010

Не работает данный пример в IE6. Туфта, а не статья. Даже пример скачал, и тот не сработал

Разделы

Термины

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

Отправить комментарий