Как сохранить альфа-прозрачность PNG при использовании & # 8220; -ms-filter & # 8221; имущество

Question

У меня есть следующий HTML:

<a><img src="myfile.png" /> Some text</a>

И это CSS:

a:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: .75;
}

Проблема с этим возникает как в IE 8, так и в IE 7.

Когда изображение PNG подчиняется -ms-filter или filter , его альфа-прозрачность нарушается. Попробуйте, и вы увидите. Это ошибка в IE 8 и IE 7.

Могу ли я удалить " -ms-opacity " и «фильтр» свойства применяются в CSS? Какой синтаксис для этого? (например, что-то вроде -ms-filter: " " ;; )

Кто-нибудь знает обойти эту проблему?

Answer 1

ОБНОВЛЕНИЕ: Фильтр AlphaImageLoader , примененный непосредственно к img, может переопределить Альфа-фильтр. Что касается удаления фильтра, вы пробовали filter: none; ?

Да, программно ориентируйтесь на IE6 и ниже с условными комментариями.

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

Также такие сценарии, как IE7-js , будут обрабатывать прозрачность PNG для вас без помех ваш CSS с нестандартным кодом.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Answer 2

Просто приукрашивая ответ SpliFF, я мог бы решить эту проблему, добавив на свою страницу следующий jQuery:

$(function() {
    if (jQuery.browser.msie)
        $('img[src$=".png"]').each(function() { // must have quotes around .png
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
});

При этом AlphaImageLoader будет применен также ко всем PNG на странице.

Answer 3

Для людей, ищущих другой ответ, я решил эту проблему с помощью следующего кода, который написал сам на простом JavaScript, поэтому он не зависит от фреймворка. Тем не менее, вы должны поместить его в событие DOM ready вашего фреймворка (или вы можете использовать domready.js, как я). Он загружает все изображения с расширением .PNG с помощью AlphaImageLoader. Это нужно сделать до того, как вы примените альфа-фильтр (вы можете применить фильтр и после этого кода с помощью JS).

Код ниже:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

Не забудьте поместить его в условные комментарии для IE:

<!--[if IE]><![endif]-->

Пожалуйста, дайте мне знать, если это работает нормально. С уважением!