Прозрачный Png в IE6

Автор: Роман Чернышов Опубликовано: 26 сентября 2010

При верстке шаблона, перед нами очень часто встает проблема корректного отображения прозрачных / полупрозрачных изображений в формате PNG, в нашем «любимом» браузере IE6. Проще говоря, прозрачности вообще нет, вместо нее мы видим сплошной фон определенного(как правило, серого) цвета. Отказываться от формата PNG в пользу GIF не хочется, а иногда это просто невозможно. И дизайнеры в последнее время стали нас все чаще баловать полупрозрачными тенями, отливами и прочими фишками художественной графики.

И так ближе к сути, для решения вышеописанной проблемы существует несколько разных способов, я опишу несколько из них.

1) — «прозрачный png вставляем как картинку»:

Просмотр кода HTML

<img src="images/png-image.png" width="100" height="50" style="behavior: url(images/png.htc);"> <!-- этот style прописываем для любого полупрозрачного png -->

в стилях картинки прописываем параметр behavior и подгружаем файл images/png.htc, следующего содержания:

Просмотр кода HTML

<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>

для нормального отображения картинки также понадобиться специальная прозрачная картинка GIF 1×1 images/transparent.gif

2) — «PNG вставляем как бэкграунд используя CSS и выводим только в IE»

Код на странице будет выглядеть очень просто, всего в одну строку:

Просмотр кода HTML

<div id="image_png"></div>

Задаем стиль для этого дива

Просмотр кода CSS

#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»

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

Но тем не менее для реализации этого метода, в начало страницы, между тегами вставляем:

Просмотр кода HTML

<!–[if lt IE 6.]–>
 <script type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script>
 <!–[endif]–>

содержание файла pngfix.js

Просмотр кода JAVASCRIPT

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, но как я писал в начале статьи перейти на другой формат в некоторых случаях просто невозможно.

Смотреть пример | Скачать пример