Прозрачность PNG и IE6 или как все таки правильно
Елы-палы. По другому не сказать. Возникла проблема при создание сайта с прозрачностью PNG в IE6. Стал рыться и в Яндексе и в Гугле. На куче разных сайтов множество общих решений. Из которых суть не ясна. Вот решил сам написать. В кратце начну с того, почему все таки верстальщики выбирают PNG а не GIF.
Тут два пункта:
- Цветов в PNG гораздо больше чем в GIF. В GIF всего 256 цветов
- PNG поддерживает прозрачность в любой градации от 0 до 100%. У GIF либо точка прозрачна либо нет. Т.е. нет золотой и нужной середины.
Получается, что если выхотите создать дейтсвительно красивый сайт, то придется использовать PNG. Отсюда у нас, у верстальщиков возникают проблемы с разработкой шаблонов. Решение обсуждаем дальше
Современные браузеры отлично работают с прозрачностью. Даже IE7. Но так как статистика нас не обманывает и 40% пользователей сидят на IE6, то все таки надо считаться с такими пользователями.
И так. Главный вопрос как добиться прозрачности в IE6. Оказалось довольно просто.
Для этого мелкомягкие используют фильтр AlphaImageLoader. К сожалениюдругих решений нет. Любые скрипты которые вы найдете в Инетернете, все равно используют этот фильтр.
Давайте разберем пример:
.user3 div h3 {
background: url(../images/module_head.png) left top no-repeat;
display:block;
width:262px;
height:28px;}
Картинка module_head.png имеет прозрачность 50%. Если посмотрим в разных браузерах то все ок, кроме IE6. И так, чтобы прозрачность появилась в IE6 используем фильтр AlphaImageLoader.
.user3 div h3 {
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">
<!--
div h3 {
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">
<!--
div h3 {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='templates/trionyx/images/module_head.png',sizingMethod='');
}
-->
</style>
<![endif]-->
</head>
<body>
<div><h3>Проверка</h3></div>
</body>
</html>
Действуйте.
Легкое пожелание на последок. Если все равно фон PNG сероват в IE6, то используйте утилиту PNGOut. Она удаляет лишнию информацию из PNG и уменьшает размер до 60%.
Комментарии
joomlaforum.ru/index.php/topic,37236.0.html Ответить
Вот: Ответить