Wie man die PNG-Alpha-Transparenz beibehält, wenn die Eigenschaft "-ms-filter" verwendet wird

Question

Ich habe die folgende HTML:

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

Und dieses CSS:

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

Das Problem damit tritt sowohl in IE 8 als auch in IE 7 auf.

Wenn das PNG -Bild dem ausgesetzt ist -Ms-Filter oder Filter, seine Alpha -Transparenz ist ruiniert. Probieren Sie es aus und Sie werden sehen. Es ist ein Fehler sowohl in IE 8 als auch in IE 7.

Kann ich die in CSS angewendeten Eigenschaften "-ms-Opacity" und "Filter" entfernen? Was ist die Syntax dafür? (ZB so etwas wie -ms-filter: "";)

Kennt jemand eine Arbeit zu diesem Thema?

Answer 1

AKTUALISIEREN: Alphaimageloader Der direkt an das IMG angewendete Filter kann den Alpha -Filter überschreiben. Das Entfernen eines Filters haben Sie versucht filter:none; ?

Ja, programmisch zielen Sie IE6 und unten mit bedingten Kommentaren.

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

Auch Skripte wie IE7-JS Vervollständigt die PNG-Transparenz für Sie, ohne Ihr CSS mit nicht standardmäßigem Code zu überfüllen.

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

Nur die Antwort von Spliff zu verschönern, ich könnte dieses Problem beheben, indem ich meine Seite folgende JQuery hinzufügte:

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

Dadurch wird der Alphaimageloader auch alle PNGs auf der Seite angewendet.

Answer 3

Für Leute, die nach einer anderen Antwort suchen, habe ich dies mit diesem folgenden Code gelöst, den ich mir in einfachem JavaScript geschrieben habe, also ist es Framework unabhängig. Trotzdem müssen Sie es in das DOM -Ereignis Ihres Frameworks einfügen (oder Sie können domready.js wie ich verwenden). Es lädt alle Bilder mit .png -Erweiterung mit dem Alphaimageloader. Es muss vor dem Antrag des Alpha -Filters durchgeführt werden (Sie können den Filter nach diesem Code auch mit JS anwenden).

Der Code unten:

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

Denken Sie daran, es in bedingte Kommentare für IE zu stecken:

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

Bitte lassen Sie mich wissen, ob es gut funktioniert hat. Mit freundlichen Grüßen!