Прозрачный Png в IE6
При верстке шаблона, перед нами очень часто встает проблема корректного отображения прозрачных / полупрозрачных изображений в формате PNG в нашем «любимом» браузере IE6. Проще говоря, прозрачности вообще нет, вместо нее мы видим сплошной фон определенного цвета. Отказаться же от формата PNG в некоторых случаях неудобно а в других просто невозможно, да и дизайнеры в последнее время стали нас все чаще баловать полупрозрачными тенями, отливами и прочими фишками художественной графики.
И так ближе к сути, для решения вышеописанной проблемы существует несколько разных способов, я опишу несколько их них.
1) — «прозрачный png вставляем как картинку»:
<img src="images/png-image.png" width="100" height="50" style="behavior: url(images/png.htc);"> <!-- этот style прописываем для любого полупрозрачного png --> |
в стилях картинки прописываем параметр behavior и подгружаем файл images/png.htc, следующего содержания:
<public:component> <public:attach event="onpropertychange" onevent="propertyChanged()" /> <script> var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32"; var realSrc; var blankSrc = "images/transparent.gif"; if (supported) fixImage(); function propertyChanged() { if (!supported) return; var pName = event.propertyName; if (pName != "src") return; if ( ! new RegExp(blankSrc).test(src)) fixImage(); }; function fixImage() { var src = element.src; if (src == realSrc) { element.src = blankSrc; return; } if ( ! new RegExp(blankSrc).test(src)) { realSrc = src; } if ( /\.png$/.test( realSrc.toLowerCase() ) ) { element.src = blankSrc; element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')"; } else { element.runtimeStyle.filter = ""; } } </script> </public:component> |
для нормального отображения картинки так же понадобиться специальная прозрачная картинка GIF 1×1 images/transparent.gif
2) — «PNG вставляем как бэкграунд используя CSS и выводим только в IE»
Код на странице будет выглядеть очень просто, всего в одну строку:
<div id="image_png"></div> |
Задаем стиль для этого дива
#image_png{ height:200px; /* значение высоты и ширины указываем как размер картинки*/ width:210px; background: url(image.png); /* пишем бэкграунд для нормальных браузеров */ -background: none; /* убираем бэкграунд для ie6 */ -filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='scale'); /* подгружаем полупрозрачный png для ie6 */ } |
3) — «Используем JavaScript для нормального отображения PNG»
Этот способ вообще является самым удобным и простым, но имеет свои недостатки, например если у пользователя в браузере будет отключена поддержка яваскрипт, то картинка будет отображаться без прозрачности, представьте если на сайте очень богатый и насыщенный дизайн и таких картинок много.
Но тем не менее для реализации этого метода в начало страницы между тегами
вставляем:<!–[if lt IE 6.]–> <script type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script> <!–[endif]–> |
содержание файла pngfix.js
var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) if ((version >= 5.5) && (document.body.filters)) { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" img.outerHTML = strNewHTML i = i-1 } } } |
4) — «Конвертация PNG в GIF»
Есть еще такие варианты как конвертация PNG в GIF при этом прозрачность сохраниться и отлично будет обрабатываться IE6, но как я писал в начале статьи перейти на другой формат в некоторых случаях невозможно.
Постовой. Для анализа сайта с целью выявления ошибок на нем и дальнейшего повышения прибыли, а также конверсии, стоит обратиться к специалистам сервиса http://sitepolice.ru/ (проверка сайтов). Длительное сотрудничество показало высокую степень их квалификации и надежность в предоставляемых услугах.
Похожие записи
Оставить комментарий
- Перенести ли домены с Рег.ру на Бегет? спросил (а) Виктор
- RuCaptcha bot и бан по IP спросил (а) Родмик
- MySQL запрос с несколькими JOIN спросил (а) Александр
- MySQL выбрать данные из двух таблиц спросил (а) Виталий
- Редирект при переносе сайта на WordPress спросил (а) Николай
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- Подключение сайта к хранилищу на Яндекс Облаке к записи
- PHP: распознать цифры, буквы с картинки к записи
- Анализ рынка Совместных покупок к записи
- Переустановка Apache к записи
- Интеграция сайта со СДЭК по API к записи
Archive
- +2021 (2)
- Апрель 2021 (1)
- Март 2021 (1)
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (37)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Март 2016 (1)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (42)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (8)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Почему парсинг сайта не всегда может быть полностью автоматическим 09.04.2021
- Интеграция по API с страховым маркетплейсом INSSMART 11.03.2021
- Регистрация программы для ЭВМ или базы данных в Роспатенте 27.12.2020
- Парсер для форума XenForo 22.12.2020
- Интеграция Тинькофф банк Эквайринг на сайт для приема платежей 18.12.2020

