Как заставить работать прозрачность PNG в Internet Explorer

    Следующая запись »
 

Ни для кого не секрет, что всеми “горячо любимый” Internet Exploited Explorer (IE6 и младше) не дружит с прозрачностью в PNG. И также ни для кого не является секретом, что есть множество способов заставить их подружиться. На текущий момент лидирующим решением этой проблемы является пожалуй IE PNG Fix.

Всё дело в том, что в последней версии (v.2.0) появилась поддержка параметров css background-position и background-repeat, что позволяет использовать прозрачные png в качестве фона без каких-либо ограничений. Единственным минусом этой версии (по сравнению с v.1.0) является то, что файл фикса весит уже не 1,5кб, а 4, и при этом необходима дополнительная js-библиотека, которая также весит 4кб. Итого 1,5кб против 8кб. Но в современном мире интернета эти цифры совсем не страшны.

Установка фикса элементарна и производится в три действия.

  1. Скачиваем IE PNG Fix v.2.0 Alpha 3 и распаковываем архив.
  2. Копируем в корень сайта файлы iepngfix.htc, blank.gif и iepngfix_tilebg.js
  3. Прописываем в блоке <head> код из представленного листинга.
<style type="text/css">
* { behavior: url(iepngfix.htc) }
</style>
<script type="text/javascript" src="iepngfix_tilebg.js"></script>

Проблема с PNG решена, все довольны и счастливы. Единственное, чем можно дополнить код, это окружив его условными комментариями для Internet Explorer, чтобы фиксы подгружались только для него и только для нужных нам версий. Но про условные комментарии – в следующий раз.

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (ещё не оценили)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 19 на запись

"Как заставить работать прозрачность PNG в Internet Explorer"

  1. Четко и легко, а главное доступно! Вообщем все как я люблю!!!

  2. Александр Шуйский
    24/08/2009 at 16:01 Постоянная ссылка Цитировать

    Всегда пожалуйста =)

  3. Есть еще пару способов один из них
    http://www.dillerdesign.com/experiment/DD_belatedPNG/
    поддерживается позиционирование и репит впринципе как и в том скрипте что и описан в статье и вроде не нужно использовать прозрачный однопиксельный гиф.
    Стараюсь не злоупотреблять этими скриптами и при возможности прописываю напрямую альфафильтр, конечно же если картинок пнг 24 не сильно много

  4. хм, если мне не изменяет память, на него я не натыкался. судя по дате создания да, врядли бы наткнулся, так как углублялся в проблему ранее.
    спасибо, на досуге опробую.
    а я напрямую никогда не пользую альфафильтр. в своё время отказался от него, не помню почему, вроде бы он где-то работать по-человечески не хотел, или с семантикой проблемы были, не помню уже.

  5. Да проблемы есть, если на прямую использовать фильтр, к примеру если ссылка находится в блоке к которому применен альфа фильтр, то ссылка работает неккоретно и в некоторых местах не активна (толи на прозрачном фоне толи на непрозрачном фоне),
    Многие решения этих проблем описаны в этой старой, но замечательной статье http://tigir.com/alpha_png.htm
    Если на странице две три картинки с полупрозрачностью, нагружать скриптами страницу думаю не имеет смысла, так как это влияет и на скорость загрузки страницы и на рендеринг страницы.

  6. точно-точно, было такое, что ни одна ссылка в блоке неактивна.
    а статью помню кстати, читал когда-то.
    по идее фиксы нужны только ишаку 6 и меньше, поэтому скрипты подрубаются через условные комментарии и тогда они нормальными браузерами не грузятся, а ишаки… вот я не знаю, по идее не должно грузится другими ишаками, кроме тех, кому предназначен фикс.

  7. ну понятное дело если через условные коментарии для ie6 и ниже то и подгружаться скрипты будут только для и ie6 (и ниже) ему только эти скрипты и нужны для поддержки полупрозрачности, все остальные то браузеры поддерживают полупрозрачность нормально.

    Я имел ввиду что старичек ie6 может загнуться если его сильно нагрузить скриптами или картинками с пнг24.
    Также раньше была проблема со скриптами в том что сраница в ие6 долго рендерилась, тобишь сначала появлялась пнг24 с фоном своим непонятным замест полупрозрачности, а потом аж через пару секунд срабатывал скрипт. Щас вроде бы это уже исправили в новых версиях.

  8. да, если очень много слоёв с прозрачными пнг, и тем более если они равняются там по различным частям и при этом фоны накладываются один на другой – да, тут неприятность в виде некоторой тормознутости, но вроде бы только на время загрузки.
    дада, было такое, белый с голубоватым фон пнг был, на первых версиях плагинов. вроде бы уже давно нету этого, и к счастью. а то смотрится действительно отвратно=)

  9. Сергей Медведицын
    02/02/2010 at 13:05 Постоянная ссылка Цитировать

    а можно как нибудь исправить черноту на заднем фоне png при анимации с помощью JQ , а именно у меня это в ie 7 , в остальных не знаю

  10. ммм, скинь пример, посмотрю

  11. Сергей Медведицын
    02/02/2010 at 15:53 Постоянная ссылка Цитировать

    http://depositfiles.com/files/5jm90nup6

    и как можно сделать чтобы при нажатии на #pokaz панель открывалась и закрывалась, без лишней кнопки #exet , просто я в jq не силён )

  12. Александр Шуйский
    02/02/2010 at 16:21 Постоянная ссылка Цитировать

    на тему черноты в фоне – попробуй IEPNGFix из данного поста.

    что касается jQuery, то я бы предложил на ссылку логотипа поставил вызов функции. суть в том, что будет переменная например равная 1. ставим проверку
    1) если параметр равен 1, то выполняем показывание меню и по окончании этого ставим параметр равным 0.
    2) если параметр не равен 1 (значит равен 0, то есть его уже открыли), то сворачиваем меню и ставим параметр равным 1.

    я что-то подобное делал в скрипте меню – http://shublog.ru/ajax/jquery/skript-menyu-s-kontentom-pochti-kak-flash-svoimi-rukami-chast-2/

    также для начала советую почитать http://shublog.ru/javascript/kak-pokazat-i-skryt-tekst-na-javascript/

    =)

  13. Сергей Медведицын
    02/02/2010 at 17:07 Постоянная ссылка Цитировать

    IEPNGFix поставил , но при анимации всё равно чёрно, ну на это я забил, те бедолаиг что юзают ie как нить переживут.

    Про вызов функции и что то там ещё, то я забыл сказать что если я в jq не силён то в js в принципе я тоже ничего не знаю :) . Саму панель то я кое как сделал, с нулевыми знаниями почитал jquery-docs.ru и склепал :)

  14. Александр Шуйский
    02/02/2010 at 22:26 Постоянная ссылка Цитировать

    ну, если подождёшь неделю-другую, я напишу пост на эту тему, а точнее пост с этим примером. потому что идея прикольная, красивая, осветить её стоит :)

  15. Сергей Медведицын
    02/02/2010 at 23:21 Постоянная ссылка Цитировать

    =O ого , а можешь просто скрипт что я на кинул подправить и показать =) тебе как мастеру мне кажется не составит труда, я просто шаблон на форум делаю, вот эту панельку туда хочу поставить ) как сделаю покажу =D

  16. окей, осталось найти время и написать.
    давай, потом покажешь :)

  17. Медвед
    03/02/2010 at 18:44 Постоянная ссылка Цитировать

    жду =)

  18. Искусство создания сайта
    16/02/2010 at 20:22 Постоянная ссылка Цитировать

    Есть очень изящное решение с помощью небольшого скрипта supersleight-min.js, который решает проблему прозрачности png в ИЕ.

  19. решений на самом деле очень и очень много, вот только проблема с повторяемостью фона может быть. насколько я понял из документации этот фикс не работает с background-position и background-repeat, так что подходит не во всех случаях. если я не прав, только скажите, заберу свои слова назад =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии