Cómo mantener la transparencia alfa PNG cuando se usa & # 8220; -ms-filter & # 8221; propiedad

Question

Tengo el siguiente HTML:

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

Y este css:

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

El problema con esto ocurre tanto en IE 8 como en IE 7.

Cuando la imagen PNG está sujeta al -ms-filter o filter , su transparencia alfa se arruina. Pruébalo y verás. Es un error tanto en IE 8 como en IE 7.

¿Puedo eliminar la " -ms-opacidad " y " filtro " Propiedades aplicadas en CSS? ¿Cuál es la sintaxis de esto? (por ejemplo, algo como -ms-filter: " " ;; )

¿Alguien sabe acerca de este problema?

Answer 1

ACTUALIZACIÓN: AlphaImageLoader aplicado directamente al img puede anular el filtro el filtro alfa En cuanto a la eliminación de un filtro, ¿has probado el filtro : ninguno; ?

Sí, apunte programáticamente a IE6 e inferior con comentarios condicionales.

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

También los scripts como IE7-js se encargarán de la transparencia de PNG para usted sin desorden sube tu CSS con un 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

Simplemente embelleciendo la respuesta de SpliFF, podría solucionar este problema agregando el 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 a todos los PNG en la página.

Answer 3

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

El siguiente código:

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

Recuerda ponerlo dentro de los comentarios condicionales para IE:

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

Por favor, hágamelo saber si funcionó bien. Un cordial saludo!