Transparenz bei PNG-Grafiken im IE

[Jogibaer_2000]

Hallo!

Ich habe folgendes Problem:
Ich möchte PNG-Dateien, welche einen weichen Schatten besitzen in ein Web-Projekt einbinden. Der Hintergrund der Grafiken muss transparent sein, da sie sich dynamisch ausrichten und der Hintergrund nicht einfarbig ist. Das Gif-Format kann ich dabei nicht verwenden, da bei max. 256 Farben der weiche Schatten in eine dicke schwarze Kontur endet.

Ich habe mich im Internet schon schlau gemacht und es gibt auch eine Möglichkeit den IE mit Hilfe des Alpha-Kanals zu "überlisten", damit er die Transparenz der PNGs richtig anzeigt. Leider funktionierte dies bisher weder mit einem JavaScript, noch mit einem Einbinden eines Code-Schnipsels in der CSS.

Bei der CSS-Variante werden die PNGs zwar korrekt im IE angezeigt, jedoch im FF nicht mehr. Bei der JavaScript-Lösung muss die PNG im 32Bit-Modus abgespeichert werden, was mir aber bisher nicht möglich war. Bei Photoshop kann ich maximal im 24Bit-Modus abspeichern.

Hat jemand vielleicht eine Lösung zum 32 Bit-Problem oder eine andere Möglichkeit damit die PNGs korrekt in beiden Browsern angezeigt werden?

 

[No5251]

https://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Das Teil funzt, wenn alles richtig eingebunden wurde.

Falls die PNGs untauglich gespeichert sein sollten, evtl.
einfach mal mit GIMP neu exportieren.

 

[Jogibaer_2000]

Hatte ich schon ausprobiert. Funktioniert nicht bei dynamischen Tabellenhintergründen. In einem anderen Tutorial dazu fand ich übrigens den Hinweis, dass die ganze Sache nur mit 32Bit-PNGs funktioniert.

Das einzige was bisher im IE funktionierte war der Einbau in der CSS über:

*.box_head {
height: XYpx;
background: none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}

Jedoch wird die transparente Grafik nicht automatisch wiederholt, sondern in einem Div-Container nur 1x angezeigt. Außerdem wie schon erwähnt werden die PNGs dann nicht mehr im FF angezeigt.

 

[No5251]

Mit Hintergrundbildern wirst du damit nicht glücklich.
Such dir besser einen Weg bei dem die Bilder einfach
eingebunden sind, passe den transparenten Teil an
den eigentlichen Hintergrund an oder erstelle GIFs.

 

[Jogibaer_2000]

Gifs kann ich wie oben schon erwähnt ausschließen, da diese statt dem schönen Schatten eine fette schwarze Kontur anzeigen. Ist ja auch nicht verwunderlich bei 256 Farben.

Gäbe es nicht eine Möglichkeit eine Browserweiche einzubauen, die IE-Nutzer einfach an ein anderes CSS verweist, worin dann Gifs ohne weiche Schatten eingebunden sind?

 

[freefly]

Photoshop speichert die PNG's vollkommen korrekt. Das sie dort nur "24bit" heißen, liegt einfach daran das dort in dem Namen die anderen 8bit des Alphakanals unterschlagen werden. Dieser beeinhaltet ja keine Farbinformationen, sondern lediglich die Transparenzinformationen. Hier brauchst Du also nicht weiter nach einem Fehler suchen.

Eine weiche für den IE kannst Du direkt in Dein externes Styliesheet einbauen und es sollte z.B. so aussehen:

.deine_klasse {
	float:right;
	width:257px;
	margin:15px 15px 0px 0px;
	text-align:left;
	}
* html .deine_klasse {
	float:right;
	width:257px;
	margin:15px 10px 0px 0px;
	text-align:left;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../pics/dein.png',sizingMethod='scale');
}

das "* html" vor dem tag bewirkt das diese klasse nur für den IE6 ausgelesen wird und z.b. der Firefox diese klasse ignoriert - er hat aber die vorherige klasse zum auslesen. Die anderen Parameter sind nur Beispiele...

Hoffe ich konnte helfen.

Wenn Dir das zu abstrakt ist, schau die nächsten Tage mal auf mein Weblog - ich habe mich zusammen mit einem Kollegen im Rahmen meines Portfolios da auch sehr mit beschäftigt.

 

[lap]

lad dir ne testversion von fireworks runter, dort hast die möglichkeit png's auch als png32 abzuspeichern.