nicht angemeldet
IE8, transparente PNGs & Alpha
Hi,
ich bin ein Bisschen schockiert. Allem Anschein nach kann man im Internet Explorer 8 einem DIV welches an irgendeiner stelle halbtransparente PNGs beinhaltet keine Transparenz geben. Wenn man das tut weden alle halbtransparenten Bereiche einfach komplett schwarz. Beispiel:
<div class="aussen">
<div class="png">Lorem ipsum</div>
</div>
.aussen {
filter: Alpha(Opacity=50);
opacity: .5;
}
.png {
background: url('transparentes.png') no-repeat;
}
Das Ergebnis:
http://img222.imageshack.us/i/bildschirmfoto20101208u.png/
statt
http://img709.imageshack.us/i/bildschirmfoto20101208u.png/
Meine Frage: Gibt es irgendeine Möglichkeit ein PNG mit Transparenz transparent zu machen? Wenn ihr euch fragt was das soll: Ich benutze Script.aculo.us' Appear- bzw. Fade-Effekt, bei dem das Bild weich ein- bzw ausgeblendet wird, und während das Bild ein-/aus-fadet ist das Ding in den transparenten Bereichen einfach schwarz.
Vielen Dank und Grüße
Lukas
-
Moin Moin!
Beim IE6 hätte ich stumpf gesagt: Der IE ist zu blöd für PNGs mit Transparenzen. Der IE8 sollte damit aber doch klarkommen. Bringst Du den IE8 irgendwie dazu, den IE6 zu emulieren?
Alexander
--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".-
Moin Moin!
Beim IE6 hätte ich stumpf gesagt: Der IE ist zu blöd für PNGs mit Transparenzen. Der IE8 sollte damit aber doch klarkommen. Bringst Du den IE8 irgendwie dazu, den IE6 zu emulieren?
Alexander
Ne das liegt ganz genau an der filter:Alpha Einstellung, das Problem wurde wohl schon öfter berichtet, allerdings so vor nem Jahr und so. Wenn man den filter anwedent (und die alphaeinsetllung vom IE8 greift auf den Filter uzrück) vermurkst er den filter den er intern für transparente PNGs benutzt.
-
-
ich bin ein Bisschen schockiert. Allem Anschein nach kann man im Internet Explorer 8 einem DIV welches an irgendeiner stelle halbtransparente PNGs beinhaltet keine Transparenz geben. Wenn man das tut weden alle halbtransparenten Bereiche einfach komplett schwarz. Beispiel:
Das passiert werden alphatransparente Bereiche über alphatransparenten bereichen liegen oder du den opacity-Wert eines alphatransparenten PNGs veränderst. Die Schnittmenge wird dann schwarz. Das ist im IE7 und 8 so.
.aussen {
filter: Alpha(Opacity=50);
opacity: .5;
}Bau die 50% Deckkraft in dein PNG ein, nimm sie aus dem CSS raus und die Sache ist erledigt.
Meine Frage: Gibt es irgendeine Möglichkeit ein PNG mit Transparenz transparent zu machen?
Mach das in der Grafik selbst.
Wenn ihr euch fragt was das soll: Ich benutze Script.aculo.us' Appear- bzw. Fade-Effekt, bei dem das Bild weich ein- bzw ausgeblendet wird, und während das Bild ein-/aus-fadet ist das Ding in den transparenten Bereichen einfach schwarz.
Dieses Problem lässt sich nicht fixen - es lässt sich nur umgehen oder vermeiden.
Alternativ: fertige zusätzlich ein indizierte Version dieses Files an - vor dem Fade-Effekt, tauscht du die Grafiken aus und animierst dann erst. Das sieht nicht so perfekt aus, wenn die Überblendung relativ schnell ist, fällt das aber nicht weiter auf.