Halbtransparente PNG einfaden

[DiDiJo]

Hi Leute,

ich wollte hier eine jQuery Animation testen, die einfach 3 Bilder nacheinader einfadet. Das ganze funktioniert auch super in allen Browsern.

Wenn ich das ganze mir im IE anschaue, dann sind die Stellen, wo normlerweise der Schlagschatten ist, fett schwarz. Woher kommt der Fehler und wie kann ich ihn beheben?

Zuerst wollte ich die Animation mit einem einfachen FadeIn realisieren, aber da vielen mir die fetten schwarzen ränder im Bild auf. Nun habe ich mir überlegt ich könnte eine animateFunktion schreiben, die einfach den alpha-filter für den IE hochschraubt bzw die Opacity für den FF.

Aber auch hier habe ich direkt diese hässlichen schwarzen blaken .... die muss ich doch irgendwie wieder wegbekommen.

Kann mir vlt. jemand helfen.

Hier mal mein HTML + CSS

<div id="imageHolder">
  <div class="pic" id="image1" style="top:-80px; left:30px;"><img src="pics/1.png" alt=""/></div>
  <div class="pic" id="image2" style="top:40px; left:350px;"><img src="pics/2.png" alt=""/></div>
  <div class="pic" id="image3" style="top:45px; left:600px;"><img src="pics/3.png" alt=""/></div>        
</div>

#imageHolder {
	position:relative;
	width:100%;
	height:100%;	
}

#imageHolder .pic{		
	position:absolute;
	padding:50px;
	
	opacity:0.3;
	filter: alpha(opacity = 30);
}


#image1 {
	z-index:100; 
}
#image2 {
	z-index:50; 
}
#image3 {
	z-index:1; 
}

Ich bin für jeden Tipp zu haben ....

 

[Sven Mintel]

Moin,

vor ner Weile hatte ich auch mit dem Problem zu Kämpfen(es existierte zu jener Zeit übrigens auch in Chrome )

Ich hab dann diverse Workarounds probiert, z.B. diesen: http://blog.pengoworks.com/index.cfm/2009/2/17/Fading-a-24bit-transparent-PNG-in-IE7

...aber irgendwie hat alles nicht recht hingehauen.
Ich hab dann aufs Faden verzichtet

 

[SpiceLab]

Deinen HTML- und CSS-Code kannst du getrost wieder einpacken, denn die Ursache für die "schwarzen Balken" ist dort überhaupt nicht zu suchen

Wenn du dir so ein schickes Script zulegst, solltest du dich zuallererst mit der dazugehörigen Gebrauchsanleitung / Dokumentation näher beschäftigen und vertraut machen, bevor du dich an ein Forum wendest, denn beim Überfliegen der Online-Referenz sind mir diverse Anmerkungen u. Kommentare bzgl. des IE aufgefallen, die sicher keine Lobeshymnen verbreiten, sondern wohl ganz sicher die erwünschten Antworten auf deine Frage ob der Gründe und möglichen Lösungsansätze liefern. Weiterführende Links speziell wegen und für den IE hab ich dort auch vorfinden können.

Zum Einstieg findet sich in dem Kommentar zu Beginn deines genutzten Javascripts "jquery.transform.js" der Link zur Autorenseite, von wo aus weitere Referenzen erreichbar sind:

/*
* jQuery 2d Transform
* http://wiki.github.com/heygrady/transform/
*
* Copyright 2010, Grady Kuhnline
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/

Alleine über diese drei miteinander vernetzten Quellseiten:

1. http://wiki.github.com/heygrady/transform/
2. http://wiki.github.com/heygrady/transform/correcting-transform-origin-and-translate-in-ie
3. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

gelangst du u.a. zu diesem nachfolgenden Beispiel, das dein vorgestelltes Problem doch "1A" widerspiegelt:

• http://www.useragentman.com/tests/cssSandpaper/boxShadowTest.html