¿Cómo mantener la transparencia PNG alfa cuando se utiliza "-ms-filtro" propiedad

Question

tengo el código HTML siguiente:

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

Y esto css:

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

El problema con esto se produce tanto en IE 8 y IE 7.

Cuando la imagen PNG está sujeta a la -ms-filtro o filtro, su transpa alfa rency está arruinado. Pruébalo y verás. Es un error tanto en IE 8 como en IE 7.

¿Puedo eliminar las propiedades "-ms-opacity" y "filter" aplicadas en CSS? ¿Cuál es la sintaxis para esto? (Por ejemplo, algo así como -ms-filter: "";)

¿Alguien conoce una solución a este problema?

Answer 1

ACTUALIZACIÓN: AlphaImageLoader filtro aplicado directamente al img puede anular el filtro Alpha. En cuanto a eliminar un filtro, ¿ha intentado filter:none;?

Sí, programmically target IE6 y below con comentarios condicionales.

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

también guiones como IE7-js se encargará de la transparencia PNG para usted sin estorbar encima de su CSS con código no estándar.

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

Sólo embellecer la respuesta de canuto, podría solucionar este problema mediante la adición de la siguiente jQuery a mi 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')"; 
     }); 
}); 

Esto aplicará el AlphaImageLoader también todos los archivos PNG en la página.

Answer 3

Para las personas que buscan otra respuesta, resolví esto usando el siguiente código que escribí en JavaScript, por lo que es independiente del marco. Aún así debes ponerlo dentro del evento listo para DOM de tu marco (o puedes usar domready.js como yo lo hice). Carga todas las imágenes con extensión .PNG con AlphaImageLoader. Tiene que hacerse antes de aplicar el filtro Alpha (puede aplicar el filtro después de este código con JS también).

El código de abajo:

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

Recuerde a ponerlo dentro de los comentarios condicionales para IE:

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

Por favor, hágamelo saber si ha funcionado bien. Saludos cordiales!