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

🕛 23.01.2009, 00:35

Как многим известно, 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

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

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

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