Картинки png в IE6

25.09.2009 17:40

Столкнувшись однажды с проблемой отображения картинок png в IE6, и найдя решение спустя только сутки, решила помочь всем новичкам, которые только осваивают профессию веб-дизайнера.

Дело в том, что при прозрачном фоне картинки с разрешением .png, IE6 вставляет в картинку серый фон. Этого можно избежать очень простым способом. Дело буквально двух минут.

Решение проблемы нашла на ресурсе http://balbesof.net/article/a-137.html Просто решила расписать более подробно.

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

Итак! Решение проблемы замены прозрачного слоя на серый у картинок с разрешением .png в браузере Internet Explorer 6

В html как раз в то место, куда Вы хотите вставить свою картинку, нужно прописать:

Вариант 1

< div id="png-holder">

Вариант 2

</div>

в обыкновенный файл css:

#png-holder { background: url('/адрес Вашей картинки'); width: 271px; height: 230px; float:right; }

в специальный созданный файл css для ie6:

#png-holder { background: none; width: 271px; height: 230px; text-indent: -9999px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='адрес Вашей картинки', sizingMethod='crop'); } #png-holder img { display:none; }

Остаётся только подключить стили css в html по аналогии:

<!--[if lte IE 6]>
<link href="//templates//css/ieonly.css" mce_href="http://templates//css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->