Как сохранить альфа-прозрачность PNG при использовании свойства -ms-filter

У меня есть следующий 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 или фильтру, его альфа-прозрачность нарушается. Попробуйте, и вы увидите. Это ошибка как в IE 8, так и в IE 7.

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

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


css opacity png internet-explorer-8 internet-explorer-7
person cbp    schedule 17.06.2009    source источник
comment
Не думаю, что мы поняли ваш вопрос. Не могли бы вы его перефразировать?   -  person Sasha Chedygov    schedule 17.06.2009
comment
@SpliFF et al. - Может ли кто-нибудь добавить (или отредактировать) ответ, чтобы дать css, необходимый для создания png с частичным отображением прозрачности с 75% непрозрачностью в IE 7 и 8. Это исходный вопрос, и ответа нет.   -  person OrangeDog    schedule 02.05.2012

Ответы (3)


arrow_upward
4
arrow_downward

ОБНОВЛЕНИЕ: фильтр AlphaImageLoader, примененный непосредственно к img, может перекрывать фильтр Alpha . Насчет удаления фильтра пробовали 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]-->
person SpliFF    schedule 17.06.2009
comment
Извините, меня не интересует IE 6 - я пытаюсь заставить это работать в IE7 и IE8 при использовании свойств css '-ms-filter' или 'filter'. - person cbp; 17.06.2009
comment
Решение работает и для ie7. просто измените условие на lt IE8 и сценарий на ie8.js - person SpliFF; 17.06.2009
comment
Но проблема возникает даже в IE 8: когда вы применяете свойства 'filter' или '-ms-filter' в CSS, любая альфа-прозрачность PNG больше не работает. - person cbp; 17.06.2009
comment
ах .. ок, я неправильно понял вопрос. Возможно, попробуйте применить фильтр AlphaImageLoader непосредственно к изображению и посмотреть, не отменяет ли он фильтр Alpha на A. - person SpliFF; 17.06.2009
comment
ну, мне также нужно удалить фильтр в переопределении стиля (подумайте о классах .loading или .active css), filter: none не работает :( - person skrat; 10.08.2009

arrow_upward
10
arrow_downward

Просто украсив ответ 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 на странице.

person cbp    schedule 17.06.2009
comment
Этот небольшой сценарий (и несколько тегов вокруг изображений, которые я хотел бы удалить) - чудо и сокровище для тех, кому приходится бороться с мерзостью MSIE. - person Brian; 15.10.2009

arrow_upward
2
arrow_downward

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

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

person Alejandro García Iglesias    schedule 08.11.2010