Transparente PNGs - harte Fakten

[Heglanx]

a) Gibt es überhaupt eine Lösung für transparente PNGs im IE6, wenn man seine Images über ein externes Style-Sheet einbindet und dort mit dem Befehl background-image: ...; arbeitet?

Habe jetzt einige Methoden getestet. Viele mit Java-Script. Aber keine hat im IE6 (SP3) funktioniert?

Kann es sein, dass diese ganzen Methoden nur dann funktionieren, wenn man das img-Tag benutzt?

Ausserdem würde mich wundernehmen, ob es auch eine Lösung für gekachelte PNGs gibt? Ich habe in einem x-beliebigen DIV eines verwendet, um den Hintergrund ein wenig durchscheinen zu lassen. Geht das auch anders? Mit einer Methode die IE6 tauglich ist?

[phpBuddy]

Generell kann jeder Browser der PNG darstellen kann, auch transparente PNG darstellen, solange diese als PNG8 mit max. 256 Farben abgespeichert wurde. Problematisch wird es nur, wenn eine Alpha-Kanal Transparenz benutzt wird. Dann kommt man um eine der gängigen JS Lösungen für ältere Browser nicht herum. Hier etwas Lektüre zum lesen [1] [2] was es mit transparenten PNG und Browser auf sich hat.

[Heglanx]

Wow. Habe ja lange gegoogelt. Aber diese zwei Links habe ich zum Thema noch nicht gesehen. So ganz nebenbei: habe mir mal den Alpha-Filter angeschaut. Der könnte unter Umständen eines meiner Probleme mit dem gekachelten PNG lösen. Mal schauen. Dumm ist nur, dass er das vererbt!

labuschin.com - Artikel zu PNG und dem IE

Das Problem löst sich ja so anscheinend ziemlich elegant.

[Heglanx]

Hab das gekachelte auch über folgenden Code hinbekommen (rein alternativ):

filter:alpha(opacity=50); /* IE */
	-moz-opacity: 0.50; /* Gecko */
	opacity: 0.50; /* Opera */

Dann kann man sich and dieser Stelle das hier sparen:

* html #gewünschtes_Element {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/gewünschtes_PNG.png)}

Man muss halt mit absolut positionierten DIV-Boxen arbeiten. Und mit z-index layern, um die Boxen unter/über- einander zu legen. Der IE6 (SP3) hat zumindest mit den Alpha-Filtern keine Probleme!

[mogidala]

Guten morgen, ich löse die PNG-Problematik hiermit. Für mich als JS-Unerfahrener die einfachste Lösung, da ich nur einen Eintrag in der CSS machen muss und fortan transparente PNGs (fast) überall verwenden kann wo ich möchte. Fast deshalb, weil's leider nur mit Hintergrundbildern funktioniert, die auch nicht wiederholt werden dürfen, reichte aber bisher immer aus.

Mit dieser .htc-"Technik" gibts ja auch noch die "Lösung" für das hover-Problem im IE - allerdings hab ich es noch nicht geschafft, beide Files unter einen Hut zu bekommen

[Heglanx]

Dann muss ich mir diese Methode nochmals anschauen. Hab die ein paar mal getestet aber das hat nicht wirklich funktioniert. Ich bin von ner ähnlichen Site ausgegangen:

The easiest way to fix png!

Grundlage ist hierbei ja immer ein blank.gif und ein .htc File. Diese Methode löst aber das Problem von background: repeat; immer noch nicht. Ich habe mir für unifarbene Flächen, welche lediglich transparent durscheinen sollen, zwei Ansätze überlegt. Mal von dem Fakt ausgesehen, dass es anscheinend keine adäquate Lösung für gekachelte PNGs gibt.

I) Man erzeugt ein PNG welches einfach so gross ist wie die Fläche selber. Erzeugt zwar ein paar Kilobytes mehr, aber sowas muss man dann wohl in Kauf nehmen. Man könnte dann das ganze über ein Conditional Comment explizit nur für den IE6 einbinden. Bei dieser Methode würde ich auf diesen Code setzten:

* html #gewünschtes_Element {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/gewünschtes_Bild.png)}

Er ist rein in CSS einzubauen und benötigt keine weiteren Files. Das ist praktisch und erleichtert die Arbeit. Für Neulinge kurz erklärt.

#gewünschtes_Element steht vor dieser Definition ganz normal für alle anderen Browser. Diese Technik versteht nach meinem Wissen sowieso nur der IE. Alle anderen interpretieren den AlphaImageLoader nicht.

#gewünschtes_Element {background-image: url(gewünschtes_Bild.png);}
* html #gewünschtes_Element {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='../images/gewünschtes_Bild.png)}

II) Man arbeitet mit dem Alpha-Filter, weil dieser lustigerweise in IE6 korrekt dargestellt wird. Ein Problem hat man, dass diese Eigenschaft auf alle Kinderelemente (Unterelemente) vererbt wird. Doofe Sache. Da bleibt nur noch position: absolute! Die DIV-Boxen nebeneinander legen und mit festen Breiten/Höhen arbeiten und layern über den z-index. Was jetzt so zumindest in meinem Fall funktioniert hat.