27.03.2011

Как известно, в браузерах Internet Explorer вполоть до 6-й версии прозрачность png файлов не поддерживается. Пользователей, которые сидят на 6-й версии браузера все еще достаточно, поэтому приходится как-то выкручиваться. Самый простой, по моему мнению способ - это использование JavaScript, а точнее уже готовых модулей для Drupal.

Давно уже для таких целей взял на вооружение модуль pngfix. Устанавливаем модуль, заходим в настройки и прописываем там id или class того объекта, в котором есть png картинка. И собственно все на этом, прозрачность начинает срабатывать и в IE старых версий. Но на днях мне понадобилась прозрачность для картинок, которые используются в качестве background. В принципе, pngfix может работать и с background:

example.html

<div id="body">     
  <div id="contentbox">          
    <p>blah blah blah</p>     
  </div>
</div>

example.css

#contentbox {background-image:url(transparent.png);}

В настройках модуля прописываем #body

Этот пример взят с drupal.org. Да работает, но нормально работает только если у вас background рисунок без повторения, т.к. если у рисунка задано повторение(например, background-repeat: repeat-x;), то ваша картинка просто растянется по ширине. Как заставить этот модуль нормально работать с повторяющимся background-ом я не знаю, поэтому стал смотреть в сторону еще одного модуля для Drupal - pngbehave.

В принципе все тоже самое. Устанавливаем модуль и в настройках прописываем нужные нам id,class. При этом не надо ничего городить с вложенными div как в случае с pngfix. Если у нас например:

#header {
  background-image: url("images/bg-top.png");
  background-repeat: repeat-x;
}

то мы в настройках модуля просто так и пишем #header. Т.е. теперь я сменил свои предпочтения в сторону модуля pngbehave.