Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
8 г. назад

Решение проблемы с прозрачностью PNG и IE6 с использованием AlphaImageLoader

Возникла проблема при создании сайта с прозрачностью PNG в IE6. Стал рыться и в Яндексе, и в Гугле. На куче разных сайтов множество общих решений, из которых суть не ясна. Вот решил сам написать. Вкратце начну с того, почему все-таки верстальщики выбирают PNG, а не GIF.

Тут два пункта:

  • Цветов в PNG гораздо больше чем в GIF. В GIF всего 256 цветов.
  • PNG поддерживает прозрачность в любой градации от 0 до 100%. У GIF точка либо прозрачна, либо нет. Т.е. нет промежуточных состояний.

Получается, что если вы хотите создать действительно красивый сайт, то придется использовать PNG. Отсюда у нас, верстальщиков, возникают проблемы с разработкой шаблонов. Решение обсуждаем дальше.

Современные браузеры отлично работают с прозрачностью. Даже IE7. Но так как статистика нас не обманывает, и 40% пользователей сидят на IE6, то все-таки надо считаться с такими пользователями.

Итак. Главный вопрос: как добиться прозрачности в IE6? Оказалось, довольно просто.

Для этого MicroSoft предлагает использовать фильтр AlphaImageLoader. К сожалению, других решений нет. Любые скрипты, которые вы найдете в интернете, все равно используют этот фильтр.

Давайте разберем пример:

.box { background: url(../images/module_head.png) left top no-repeat; display:block; width:262px; height:28px
} 

Картинка module_head.png имеет прозрачность 50%. Если посмотрим в разных браузерах, то все «Ок», кроме IE6. Итак, чтобы прозрачность появилась и в IE6, используем фильтр AlphaImageLoader:

.box { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/trionyx/images/module_head.png',sizingMethod='')
} 

Тут необходимо заметить очень важный факт, о котором никто не пишет. Путь до картинки должен быть абсолютным. Т.е. путь к картинке – от корня сайта, а не относительно CSS.

Здесь есть и минусы. При таком решении прозрачности браузер IE6 не понимает background-position и background-repeat. Лично для меня они и не нужны. Я использую эти два определения чаще всего только для фона страницы. А так они не нужны.

С другой стороны, у верстальщика должна быть голова на месте, и он тогда сам сможет поставить фон в нужное место с помощью div, span, padding и margin.

В итоге будет так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- .box{ background: url(../images/module_head.png) left top no-repeat; display:block;
            width:262px;
            height:28px;
            line-height: 28px;
            text-align: center;
         }	-->	</style>	<!--[if lte IE 6]>	<style type="text/css">	<!--	.box {
            background: none;
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/trionyx/images/module_head.png',sizingMethod='');	}	-->	</style>	<![endif]-->
      </head>
   <body>
      <div class="box">Проверка</div> </body>
</html>  

Легкое пожелание напоследок. Если все равно PNG-фон в IE6 сероват, то используйте утилиту PNGOut. Она оптимизирует изображение PNG и уменьшает размер до 60%.

Комментарии

#alli12.09.2008 10:35
А как сделать чтобы png-картинка, отображаемая с помощью AlphaImageLoader всё таки повторялась по оси Х?Ответить
#Верстальщик20.10.2008 19:05
С помощью AlphaImageLoader повторение png-фона сделать нельзя. Если размер повторяющегося фона небольшой (обычно это какой-нибудь горизонтальный градиент), можно сделать png-файл с шириной, скажем, 2000px, и к такому фону применить фильтр.Ответить
#PaLyCH20.10.2008 19:47
Да. И только так. Верстальщик, ты правОтветить
#PaLyCH13.04.2009 17:33
Стандартными средствами ни как, только использования скриптов. И то они глючныеОтветить
#alli12.09.2008 21:49
Жалко, а такой был бы хороший способ )Ответить
#PaLyCH12.09.2008 23:14
Не самое удачное решение использование iepngfix.htc. Пробовал его, не всегда работает, поэтому приходиться извращатьсяОтветить
#alli14.09.2008 10:52
ЧУВАК, я нашёл решение! и с бекгаундами работает и со всем!

joomlaforum.ru/index.php/topic,37236.0.htmlОтветить
#PaLyCH14.09.2008 12:21
Пробовал это решение, не помогло полноценно. Поэтому пока извращаемсяОтветить
#Ден24.10.2008 14:37
В IE6 прозрачность заработала, зато Opera перестала видеть картинку.Ответить
#PaLyCH24.10.2008 14:42
Скорее всего забыл создать правило для ИЕ6. смотреть в шапкеОтветить
#Fallen Angel31.10.2008 02:15
а как тогда быть с PNG-ссылками, где при наведении мыши на одну картинку, она сменяется другой?
Вот:Ответить
#Fallen Angel31.10.2008 02:18
да что ж у меня не получается код то вставить???Ответить
#PaLyCH31.10.2008 02:32
Я тоже по первой долго мучался. Но оказалось, что путь к картинке должен быть от корня сайтаОтветить
#Daria29.11.2009 00:44
Спасибо, PaLyCH!!! Долго промучалась, пока не наткнулась на твой пост - только тут написано, что путь до картинки должен быть АБСОЛЮТНЫМ.Ответить
#LineofLife31.07.2010 12:47
Спасибо!Ответить
#Nemezis07.11.2010 11:52
Есть вопрос. Прописал в login.css модуля авторизации (Cms joomla 1.5) терь png отлично отображаются но поверх моего .png находятся поля для ввода логина, пароля,кнопка вход и т.д. всё это стало не кликабельным. Есле есть мысли как это можно исправить. отпишитесь ктонибуть.Ответить
#PaLyCH07.11.2010 12:05
Ничего не понятно. Покажи ссылку. ПодскажуОтветить
#Гость17.02.2011 20:25
Спасибо, наконец-то узнал про абсолютный путь!!!, а то замучился ужеОтветить

Добавить комментарий

Наверх