Разделы

Как в браузере IE6 сделать повторяющийся фон в формате PNG?

Метки:

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

Ангус Тёрнбулл (twinhelix.com) предложил простое решение, основанное на использовании двух файлов — iepngfix_tilebg.js и iepngfix.htc. Файл iepngfix_tilebg.js вносит в IE6 поддержку повторения фона для изображений в PNG-24. А iepngfix.htc исправляет ошибки браузера, связанные с прозрачностью.

Общий синтаксис будет следующий.

<head>
 <script type="text/javascript" src="iepngfix_tilebg.js"></script> 
 <style type="text/css">
  IMG { behavior: url("iepngfix.htc"); }
  DIV { background-repeat: repeat; behavior: url("iepngfix.htc"); }
 </style>
</head>

Для обычных изображений, выводимых через тег <IMG>, и для элементов с фоновой картинкой следует указать стилевой атрибут behavior со значением url("iepngfix.htc"). Учтите, что добавлять этот атрибут для всех изображений без исключения не рационально, т.к. это может привести к повышению нагрузки на браузер и как следствие замедлению его работы. Поэтому добавляйте behavior только к тем тегам, где используется рисунок с прозрачными областями в формате PNG-24.

В примере 1 показано создание блока с тенью. За счет применения на странице неоднородного фонового рисунка использование формата PNG-24 наиболее оправданно.

Пример 1. Использование картинок в формате PNG

<!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">
  <script type="text/javascript" src="iepngfix_tilebg.js"></script> 
  <title>IE6, фон, PNG и repeat</title>
  <style type="text/css">
   BODY { 
    background: url(bg_chess.png); /* Фоновый рисунок веб-страницы */
   }
   .block {
    margin: 0 auto; /* Выравниваем по центру */
    width: 500px; /* Ширина блока */
   }
   .block-header {
    line-height: 1px;  /* Убираем отступы между рисунком и текстом */
   }
   .block-content {
    background: url(block2.png) repeat-y; /* Параметры фона */
    width: 440px; /* Ширина для IE6 */
    padding: 5px 30px; /* Отступы вокруг текста */
    behavior: url("iepngfix.htc"); /* Для прозрачного PNG в IE6 */
   }
   .block IMG {
    behavior: url("iepngfix.htc"); /* Для прозрачного PNG в IE6 */
   }
  </style>
 </head>
 <body>
  <div class="block">
   <div class="block-header"><img src="block1.png" alt=""></div>
   <div class="block-content">
    Примерная структура маркетингового исследования, как принято считать, 
    восстанавливает медиабизнес, повышая конкуренцию. План размещения, 
    в рамках сегодняшних воззрений, искажает из ряда вон выходящий 
    поведенческий таргетинг, используя опыт предыдущих кампаний. 
    До недавнего времени считалось, что рекламоноситель 
    программирует популярный нестандартный подход, опираясь на 
    опыт западных коллег. Согласно предыдущему, концепция развития 
    существенно порождает продуктовый ассортимент, расширяя долю 
    рынка. Бренд ускоряет маркетинг, опираясь на опыт западных коллег.
   </div>
   <img src="block3.png" alt="">
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Использование прозрачных картинок в браузере IE6

Примите во внимание, что атрибут behavior не входит в CSS 2.1, поэтому его использование приведет к невалидному стилевому коду.

Перед использованием файла iepngfix.htc измените в нем путь к однопиксельному прозрачному рисунку, он называется transparent.gif.

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

Гость, 09.12.2008

Не работает.

Admin, 09.12.2008

Работает!

Colorme, 02.03.2009

Ооооо!! Огромное спасибо за статью!!! Супер!!!11

Светлана, 18.03.2009

Статья, конечно, хорошая, работает, вот только браузер висит минут 7, прежде чем додумает. Добавила behavior только к двум определенным тегам. (
Этого никак не избежать?

Светлана, 18.03.2009

если что, мой мейл для ответа svetlana_21_86@mail.ru
Спасибо!

htmler, 26.03.2009

дикий тормоз при работе скрипта

Admin, 31.03.2009

Это точно подмечено, скрипт тормозит. Поэтому и надо behavior добавлять только к отдельным изображениям.

Илья, 23.04.2009

Извините, что означает "Перед использованием файла iepngfix.htc измените в нем путь к однопиксельному прозрачному рисунку, он называется transparent.gif."?
В файле iepngfix.htc, который я скачал и так указан файл transparent.gif и его же я скачал в комплекте с этой страницы.

Admin, 24.04.2009

Илья, это сообщение на тот случай, если файл transparent.gif будет располагаться в другой папке или называться иначе. В прикрепленном архиве все работает корректно.

JIucky, 25.04.2009

Влад спасибо - то что надо!

Гость, 20.05.2009

Cпасибо Владу. Очень выручил.

Николя, 27.06.2009

Тормозит!!! очень сильно если для обводки сайта делать то просто жуть до 5 минут можно ждать ((((

RL, 29.12.2009

Сделал все как тут расписано донельзя просто и доступно и действительно теперь обладатели чудо-браузера 6 версии не жалуются. Все корректно пашет. До этого пробовал другие решения, к сожалению те оказались наполовину работающими. Некоторые новички предлагали, аж сообщения с рекомендациями выводить на сайт чтобы посетитель ставил новую версию осла (позор!). Типа проблему с больной головы на здоровую перекладывал.

Diman, 29.05.2010

Thanks very match!)))

Константин, 18.07.2010

Да ничего не работает ...
На Денвере уже головой об стенку бьюсь и с разных сайтов скачивал этот iepngfix.htc... Не работает !
Пути и так и сяк прописывал.
Да пути тут до фонаря так как я все положил в корень сайта..

Разделы

Термины

Как в браузере IE6 сделать повторяющийся фон в формате PNG?

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