Кирилл Монахов
Вход для клиентов →

Кирилл Монахов — графический дизайнер, проектировщик интерфейсов, менеджер проектов,

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


CrunchMobile
Google Developer Day 2008 в Москве
Кризис
Снова в эфире!

Простое решение прозрачности PNG в IE

Не секрет что Internet Explorer версии 6, не может корректно показывать прозрачные PNG файлы, вернее браузер просто не показывает прозрачность.

Про эти проблемы я уже давно забыл, так как уже есть IE 7 в котором этих проблем нет, да и тот же FireFox 2 нормально всё показывает. Однако на днях я делал шаблон для одного проекта, и там всплыла проблема с PNG. У клиента была потребность поддержки старого IE браузера. Ну что ж, есть проблема – решим её!

Немного покопавшись в сети, я не нашёл кратких и красивых способов решения этой проблемы. Одни предлагали писать JS, другие «резали» одну картинку на несколько (верх, подложка и тп.), всё одним словом было совсем не тем, что я искал.

После этих пустых поисков я решил обратиться к источнику первичных знаний, а именно MSDN, ведь кто как не сама компания-разработчик лучше других скажет что делать!

Решение:
Есть функции, которые поддерживаются только IE, и это то, что нам нужно, так как другие современные браузеры и так нормально отображают прозрачные PNG. Необходимо использовать функцию: filter:progid:DXImageTransform.Microsoft.Alpha. Эта такая хитрая функция, которая управляет прозрачностью, а функция: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader загружает картинку, как раз нужный нам PNG.

А теперь про главное, про секрет!

Нужно обхитрить IE так чтобы он не показывал картинку img а другие браузеры показывали бы. Это делается просто, вот так: в тег img ставим style=”filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);” теперь IE не будет показывать картинку (в нашем случае это прозрачный PNG), а все остальные браузеры не поймут данный стилевой трюк, и просто корректно покажут картинку. Таким образом, мы заставили одним и тем же тегом, IE не показывать картинку, а всем остальных браузерам показывать картинку.

Но как же нам всё же показать через IE 6 корректно прозрачную PNG картинку? Для этого мы как пример обрамим, наш тег img ещё и div, а затем добавим в него следующий стиль: style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’)”. Этот стиль заставит IE 6 корректно вывести прозрачный PNG, а другие браузеры опять не поймут его и не будет наложений одной картинки, которую они и так уже вывели, ну другую.

Вот так всё просто решается!

П.С.: Данная тема получила продолжение на сайте Agile Web Development.

29.03.07 | Инженерия ПО, Разное

Коментарии: 40

  1. Валерий April 18th, 2007 на 11:35 pm

    Кирилл, всё просто да не так просто.
    Данный способ не валиден XHTML 1.0 Transitional. И к тому же неудобен при большом количестве png.
    Известен ли вам какой0нибудь другой способ?


  2. Kirill Monakhov April 19th, 2007 на 10:10 am

    А почему он не валиден для XHTML? Поясните! У нас всё валидно очень даже, что мы такое сделали, что стало не валидно? Мы же просто добавляем к картинки class со стилем и тоже самое к div. То, что касается большого кол-ва PNG, то просто делаете больше стилей и всё.

    А вообще данная проблема с каждым днём уже всё менее актуальна, так как IE 7 и FF 2 прекрасно всё отображают.


  3. NeoN April 20th, 2007 на 10:22 pm

    а немогли бы вы помоч решить задачу с png в качастве фона?


  4. Kirill Monakhov April 20th, 2007 на 10:30 pm

    А с фоном то что? У меня катастрофически мало времени. Но если есть конкретные вопросы, пишите на почту, если будет время, отвечу, а если не будет времени, то честно скажу что не смогу ответить.


  5. NeoN April 20th, 2007 на 10:40 pm

    задача в том чтобы использовать полупрозрачную png как фоновый рисунок. то есть чтобы за этим фоном просматривались другие картинки


  6. Kirill Monakhov April 20th, 2007 на 11:23 pm

    На сайте http://www.halton-climate.ru/ который мы делали, можно найти такой пример. На первой странице есть диск «Halton HIT Design» файл картинки называется ‘hitdesign_cdrom.png’. Посмотрите исходник, как там это сделано и сделайте то, что вам нужно. Просто нужно понимать, что всё работает через DIV, вам совсем не обязательно использовать ‘background-image’ используйте DIV.
    Да прибудет с вами сила!


  7. Валерий May 3rd, 2007 на 2:39 pm

    Про применение классов Вы ничего не говорили. При написании вот такого инлайнового стиля filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’) валидатор выдаст ошибку.


  8. Kirill Monakhov May 3rd, 2007 на 7:37 pm

    Думаю, решение данного вопроса возможно только при личной встрече. ;)


  9. Артем May 11th, 2007 на 8:58 pm

    Или в IE5 этот способ не работает, или я что-то не так понял…
    А нельзя ли выложить пример кода?


  10. Kirill Monakhov May 11th, 2007 на 10:08 pm

    На сайте http://www.halton-climate.ru/ который мы делали, можно найти такой пример.


  11. Жеко May 23rd, 2007 на 4:56 pm

    а все таки с фоном нет более простого решения?? заключать все в DIV это некрасиво. имхо


  12. Kirill Monakhov May 24th, 2007 на 12:04 am

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


  13. Dimon July 1st, 2007 на 7:44 pm

    тема далеко не исчерпала, ИЕ6 пользуется еще туча народу, а энтот способ не катит, когда пнг тянется или повторяется и мы не знаем ее точный размер. Двойка Кирилл Монахов!


  14. Kirill Monakhov July 1st, 2007 на 11:57 pm

    Поймите Dimon, я описал, как решить конкретную задачу, а не как решить проблему прозрачного PNG во всех вариантах, фактически я просто указал на функцию style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’)”, так что станьте мужчиной Dimon, используйте, скажем, JavaScript для решения своей задачи. У меня же была задача, которую я решил! Если у вас другая задача, опишите как решить её в универсальном варианте и дайте ссылку на неё, а так это вам Dimon двойка, даже кол, так как умного вы ни чего не написали. Встали и ушли…


  15. lozoffoy July 20th, 2007 на 4:20 pm

    Автору большое с хвостиком..
    Использовал неоднократно..


  16. Alex Schneider July 22nd, 2007 на 8:58 pm

    png для фона:

    xhtml:

    css:
    #header {
    background: url(img/head_b.png) no-repeat !important;
    background-image: none;
    }

    Info: Document content looks like XHTML 1.0 Strict

    Если кому-нибудь пригодилось – дайте знать.


  17. Alex Schneider July 22nd, 2007 на 9:00 pm

    KM, сорри за прошлый пост…

    png для фона:

    xhtml:

    css:
    #header {
    background: url(img/head_b.png) no-repeat !important;
    background-image: none;
    }

    Info: Document content looks like XHTML 1.0 Strict

    Если кому-нибудь пригодилось – дайте знать.


  18. Alex Schneider July 22nd, 2007 на 9:02 pm

    KM, сорри за прошлые посты…

    png для фона:

    xhtml:

    “”

    css:
    #header {
    background: url(img/head_b.png) no-repeat !important;
    background-image: none;
    }

    Info: Document content looks like XHTML 1.0 Strict

    Если кому-нибудь пригодилось – дайте знать.


  19. Alex Schneider July 22nd, 2007 на 9:03 pm

    KM, еще раз сорри за прошлые посты…

    png для фона:

    xhtml:

    css:
    #header {
    background: url(img/head_b.png) no-repeat !important;
    background-image: none;
    }

    Info: Document content looks like XHTML 1.0 Strict

    Если кому-нибудь пригодилось – дайте знать.


  20. Alex Schneider July 22nd, 2007 на 9:09 pm

    KM, еще раз сорри за прошлые посты…

    png для фона:

    xhtml:

    “див id=”header” style=”filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/head_b.png’)”"”/див”

    css:
    #header {
    background: url(img/head_b.png) no-repeat !important;
    background-image: none;
    }

    Info: Document content looks like XHTML 1.0 Strict

    Если кому-нибудь пригодилось – дайте знать.


  21. Денис Талала July 30th, 2007 на 9:13 am

    Ваше решение для полупрозрачности PNG у меня в IE 6 почему-то не работает. Значение opacity пробовал менять, оно работает, а вот AlphaImageLoader не работает. Не знаете, почему?


  22. Kirill Monakhov July 30th, 2007 на 9:49 am

    Не видя код сказать сложно. Возможно, вы, где то ошиблись. Как это не звучит банально, но 80% ошибок бывают именно из-за синтаксических ошибок.


  23. SerGX August 29th, 2007 на 5:27 pm

    Мда.. полезно! Но охота что-бы это показывалось и в Других браузерах. А то получается приходится выбирать.

    Решил проблему с помошью тега.


  24. Kirill Monakhov August 29th, 2007 на 11:02 pm

    А в других браузерах всё работает. То есть этот способ решает проблему сразу во всех браузерах. О как!


  25. SerGx September 2nd, 2007 на 12:13 am

    Да нет… Вот написано что все остальные браузеры не поймут данный трюк. А что тогда они будут вставлять в картинку? А если стоит после стайла scr=png.png То ie его опять каряво покажет…


  26. Kirill Monakhov September 2nd, 2007 на 11:16 am

    А ещё написано так: Таким образом, мы заставили одним и тем же тегом, IE не показывать картинку, а всем остальных браузерам показывать картинку.

    Читайте внимательнее, пробуйте в деле.


  27. Anlide September 3rd, 2007 на 7:36 pm

    У меня тоже полупрозрачность PNG в IE 6 почему-то сначала не работала. Поковырявшись немного в коде я нашёл в чём проблема. При всём уважении к автору, и к отличному решению проблемы, у него в коде опечатка…

    Вместо:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’logo-my.png’);

    Надо написать:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’logo-my.png’);

    Нашли 10 отличий? :)


  28. XXX September 26th, 2007 на 1:30 pm

    А кто нибудь может объяснить такой глюк:
    В WinXP SP1 c прозрачностью всё нормально, а в WinXP SP2 нет!


  29. IGI December 13th, 2007 на 3:15 pm

    Эх, не могу понять где я ошибся :(
    Во всех броузерах все нормально, а в IE6
    рисунок есть но его невидно совсем (как того суслика)


  30. Garfield January 21st, 2008 на 9:40 am

    Кирилл спасибо вам большое. Я потерял много времени с этими png пока верстал. Ваш пост оч помог и все сразуже заработало.


  31. Msconfig February 25th, 2008 на 12:49 am

    Странная вешь, вот тут у меня http://msconfig.cbs.su , данны йметод работает без проблем вот код css :

    table.box {
    background: url(“../design/location-bg.png”) repeat;
    -background: none;
    -filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./design/location-bg.png’, sizingMethod=’scale’);
    color: #C0BFC0;
    font-size: 12px;
    }

    Но без видимых изменений в шаблоне и без изменений в css, перенес на виндовый сервак (2003), с CMS Joomla, прозрачность прокала как и сама картинка… Коментируя filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’./design/location-bg.png’, sizingMethod=’scale’);

    фон появляется но без прозрачности… Не могу понят ьв чем проблема…


  32. MrCent February 27th, 2008 на 11:44 am

    Не забывайте для div указывать еще размер картинки, например width:290px; height:130px;. Поэтому и не видно картинку в IE6 скажем.


  33. Anteech April 17th, 2008 на 10:45 am

    Все-таки решение проблем с отображением в “старых” браузерах актуальна всегда. Приходится следить за тем, чтобы страницы работали в разных браузерах, и в не слишком старых также. Нужно тестировать все вдоль и поперек и тд…. И касательно нового IE7 – мне видится нелепым на него сразу же полагаться. Ведь у большинства его может не быть, это раз, у многих наверняка другие предпостения к браузеру (вот здесь уже прибегаем к обеспечению кроссплатформненности сраницы для показа в IE и FF (Firefox) B в довершение – доминируют все-таки те страницы, написанные в стандартном совместимом со всеми устройствами HTML без слоев и наворотов…


  34. FRITZ June 19th, 2008 на 12:22 pm

    Кирилл Монахов, спасибо, за простое решение проблемы.
    MrCent, спасибо, что подсказал задать ширину и высоту в div. Пока не задал не видел картинку.

    ЭТО ДЕЙСТВИТЕЛЬНО РАБОТАЕТ!

    Вот мой код:
    ‘);”>” />


  35. FRITZ June 19th, 2008 на 12:23 pm

    хмм… мой код не видно. видимо из-за кавычек…


  36. Emiel August 28th, 2008 на 2:44 am

    Не катит. Тоесть, оно вроде работает, но далеко не везде.
    В CMS Drupal использование этого метода невозможно, надо работать через JS… Хотя для этой цмс есть модуль, решающий проблему(отчасти…)


  37. Виталий December 7th, 2008 на 3:01 am

    Спасибо, Кирилл! Попробовал в IE6 – отлично работает. Пробовал в других современных браузерах не от MS – Opera 9.62, Safari 3.1.1, FF 3.0.4, Chrome 0.4.154.29 – тоже работает нормально.
    Хотелось бы еще испытать этот способ на других версиях IE.

    Я работаю c Rails, посему просто написал метод, который всё доделывает сам, и таким образом кол-во картинок на странице – не проблема. Единственное что пока напрягает – необходимость явно передавать размеры картинки в метод. Но я думаю, что и это не проблема, надо найти библиотеку, которая бы умела извлечь размеры.

    Вобщем, еще раз спсб!


  38. Виталий December 7th, 2008 на 5:31 am

    И с библиотекой для извлечения размеров все оказалось просто – можно использовать RMagic.


  39. Виталий December 13th, 2008 на 6:39 pm

    Протестировал на других версиях IE:

    5.5 – failed
    7 – OK
    8 – OK

    надо бы разобраться с 5-кой …


  40. Виталий December 15th, 2008 на 4:09 am

    поглядел на статистику использования MSIE 5.x и понял, что можно не заморачиваться – их уже почти никто не использует.

    оформил всё в виде рельсового плагина под названием IE6 PNG Fix:
    http://agilewebdevelopment.com/plugins/msie6_png_transparancy_fix




Copyright © 2009 Kirill Monakhov. All rights reserved | Powered by WordPress