Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
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
Спасибо, наконец-то узнал про абсолютный путь!!!, а то замучился уже Ответить

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

Наверх