Como manter a transparência do PNG Alpha ao usar a propriedade "-MS-Filter"

Question

Eu tenho o seguinte HTML:

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

E isso CSS:

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

O problema com isso ocorre nos IE 8 e no IE 7.

Quando a imagem PNG está sujeita ao -ms-filter ou filtro, sua transparência alfa é arruinada. Experimente e você verá. É um bug nos IE 8 e IE 7.

Posso remover as propriedades "-ms-opacity" e "filter" aplicadas no CSS? Qual é a sintaxe para isso? (por exemplo, algo como -ms-filter: "";)

Alguém conhece uma contorna para esta questão?

Answer 1

ATUALIZAR: Alphaimageloader O filtro aplicado diretamente ao IMG pode substituir o filtro alfa. Quanto a remover um filtro, você tentou filter:none; ?

Sim, direciona programação IE6 e abaixo com comentários condicionais.

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

Também scripts como Ie7-js Lidará com a transparência do PNG para você sem atravessar o seu CSS com código não padrão.

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

Basta embelezar a resposta de Spliff, eu poderia resolver esse problema adicionando o seguinte jQuery à minha página:

$(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')";
        });
});

Isso aplicará o alphaimageloader também todos os PNGs da página.

Answer 3

Para as pessoas que procuram outra resposta, resolvi isso usando este código a seguir, eu me escrevi em JavaScript simples, por isso é a estrutura independente. Ainda assim, você precisa colocá -lo dentro do evento DOM da sua estrutura (ou pode usar o DomReady.js como eu fiz). Ele carrega todas as imagens com a extensão .png com o alphaimageloader. Isso deve ser feito antes de aplicar o filtro alfa (você pode aplicar o filtro após este código com JS também).

O código abaixo:

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 + "')";
        }
    }
}

Lembre -se de colocá -lo dentro de comentários condicionais para o IE:

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

Por favor, deixe -me saber se funcionou bem. Atenciosamente!