CMS Drupal

Как известно, в браузерах 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.

Комментарии

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".
admin аватар

Все таки не зря я в свое время изначально выбрал для себя pngfix. На очередном проекте pngbehave отказывается работать. Вернулся к старому проверенному pngfix, благо в качестве фона png не было.

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

Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <1c7>, <drupal5>, <drupal6>, <javascript>, <php>. Beside the tag style "<foo>" it is also possible to use "[foo]".