Как вставить прозрачный и полупрозрачный png в ie6
Вставляем полупрозрачную картинку png в ie.
Суть проблемы
Очень часто дизайнеры используют в своих макетах различные тени, свечения и прочие элементы с полупрозрачными областями. При вёрстке это выливается в сложности, связанные с тем, что полупрозрачность png воспринимается не всеми браузерами. Одним из непонимающих альфа-канал является любимый internet explorer 6. В итоге приходится избавляться от png-полупрозрачности, что явно неудобно в большинстве случаев.
Решение проблемы с png бэкграундом для ie
Бэкграунд png будем вставлять через стили css отдельно для ie6 и отдельно для остальных браузеров. В html-коде нам бпонадобится отдельный блок div с id="png-image".
Пример
#png-image {
height:200px; /* значение высоты и ширины указываем как размер картинки*/
width:210px;
background: url(image.png); /* пишем бэкграунд для нормальных браузеров */
-background: none; /* убираем бэкграунд для ie6 */
-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); /* подгружаем полупрозрачный png для ie6 */
}
Вот как это выглядит:
height:200px; /* значение высоты и ширины указываем как размер картинки*/
width:210px;
background: url(image.png); /* пишем бэкграунд для нормальных браузеров */
-background: none; /* убираем бэкграунд для ie6 */
-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); /* подгружаем полупрозрачный png для ie6 */
}
<div id="png-image">
Этот png вставляется как фон для блока.
Такие элементы дизайна, как тени или свечения следует делать таким способом.
При изменении размеров блока с id="png-image" полупрозрачный png будет растягиваться или сжиматься вместе с блоком.
Полупрозрачный png в виде картинки
Если же прозрачная или полупрозрачная png-картинка не является элементом дизайна, то показать её в ie 6 можно следующим образом. В html-код вставляем обычный тег img с атрибутом style:
<img src="img/png-image.png" width="200" height="100" style="behavior: url(img/png.htc);"> <!-- этот style прописываем для любого полупрозрачного png -->
Создаем файл png.htc следующего содержания и сохраняем его в папке img:
<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 = "img/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>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "img/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-картинка transparent.gif. Её нужно сохранить в папке вместе с png.htc.
Так наш png смотрится в ie6 и других браузерах:
А этот png вставляется тегом img, а не бэкграундом.
А этот png вставляется тегом img, а не бэкграундом.
Поделиться ссылочкой: