Como manter a transparência do PNG Alpha ao usar a propriedade "-MS-Filter"
-
05-07-2019 - |
Pergunta
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?
Solução
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]-->
Outras dicas
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.
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!