Wie PNG Alpha-Transparenz bei der Verwendung von "-ms-Filter" Eigenschaft

Ich habe folgende HTML halten:Wie PNG Alpha-Transparenz bei der Verwendung von "-ms-Filter" Eigenschaft

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

Und diese css:

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

Das Problem mit diesem Fall in beiden IE 8 und IE 7.

Wenn die PNG-Bild auf das -MS-Filter unterliegt oder Filter, dessen alpha transpa Die Liebe ist ruiniert. Probieren Sie es aus und Sie werden sehen. Es ist ein Fehler in IE 8 und IE 7.

Kann ich die Eigenschaften "-ms-Opazität" und "Filter" entfernen, die in CSS angewendet werden? Wie lautet die Syntax dafür? (z.B. etwas wie -ms-filter: "";)

Kennt jemand eine Arbeit um dieses Problem?

Quelle

2009-06-17 cbp

Ich glaube nicht, dass wir Ihre Frage verstanden haben. Könnten Sie versuchen, es neu zu formulieren? –

@ SpliFF et al. - Kann jemand eine Antwort hinzufügen (oder bearbeiten), um die CSS zu geben, die erforderlich ist, um ein PNG mit partieller Transparenzanzeige mit 75% Deckkraft in IE 7 und 8 zu erstellen. Dies ist die ursprüngliche Frage und keine Antwort ist abgeschlossen. – OrangeDog

UPDATE: AlphaImageLoader Filter, der direkt auf den IMG angewendet wird, kann den Alpha-Filter außer Kraft setzen. Wie zum Entfernen eines Filters haben Sie versucht filter:none;?

Ja, programmiere IE6 und darunter mit bedingten Kommentaren.

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

auch Skripte wie IE7-js wird für Sie PNG Transparenz ohne unübersichtlich Ihre CSS mit Nicht-Standard-Code verarbeiten.

<!--[if lt IE 7]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> 
<![endif]-->

Quelle

2009-06-17 03:43:23 SpliFF

Tut mir leid, ich bin nicht interessiert an IE 6 - Ich versuche, das funktioniert in IE7 und IE8, wenn Sie die '-ms-Filter' oder 'Filter' CSS-Eigenschaften verwenden. – cbp

Die Lösung funktioniert auch für ie7. Ändern Sie einfach die Bedingung zu lt IE8 und das Skript zu ie8.js – SpliFF

Aber das Problem tritt auch in IE 8 auf: Wenn Sie entweder die Eigenschaften "Filter" oder "-ms-Filter" in CSS anwenden, funktioniert keine PNG Alpha-Transparenz mehr. – cbp

Gerade Spliff Antwort Verschönern, konnte ich dieses Problem beheben, indem Sie den folgenden jQuery meiner Seite hinzufügen:

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

Dies wird die Alphaimageloader auch alle PNGs auf der Seite anwenden.

Quelle

2009-06-17 04:10:04 cbp

Dieses kleine Skript (und ein paar span-Tags um die Bilder, die ich gerne verblassen würde) ist ein Wunder und ein Schatz für diejenigen, die mit der MSIE-Monstrosität ringen müssen. – Brian

Für Leute, die nach einer anderen Antwort suchen, habe ich das mit dem folgenden Code gelöst, den ich selbst in JavaScript geschrieben habe, also ist es Framework-unabhängig. Sie müssen es dennoch in das DOM-ready-Event Ihres Frameworks einfügen (oder Sie können domready.js wie ich verwenden). Es lädt alle Bilder mit der Erweiterung .PNG mit dem AlphaImageLoader. Es muss getan werden, bevor Sie den Alpha-Filter anwenden (Sie können den Filter nach diesem Code auch mit JS anwenden).

Der folgende Code:

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 bedingten Kommentare für IE zu setzen:

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

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

Quelle

2010-11-08 18:08:07

Wie PNG Alpha-Transparenz bei der Verwendung von "-ms-Filter" Eigenschaft

Antwort

Verwandte Themen