Wie bekomme ich PNG-Transparenz in Browsern zum Laufen, die sie nicht nativ unterstützen?

Question

Unser (geliebter) Designer erstellt weiterhin PNG-Dateien mit transparentem Hintergrund zur Verwendung in unseren Anwendungen.Ich möchte sicherstellen, dass diese Funktion des PNG auch in „älteren“ Browsern funktioniert.Was ist die beste Lösung?

Änderungen unten

@mabwi & @syd – Ob ich der Verwendung eines PNG zustimme oder nicht, ist nicht der Punkt.Das ist ein Problem, das ich lösen muss!

@Tim Sullivan – IE7.js sieht ziemlich cool aus, aber ich glaube nicht, dass ich alle anderen Änderungen in einer Anwendung einführen möchte.Ich hätte gerne eine Lösung, die ausschließlich das PNG-Problem behebt.Danke für den Link.

Answer 1

Hier ist ein großartiger Artikel, der erklärt und zeigt, wie man mit PNG-Transparenz in älteren Browsern umgeht: http://www.alistapart.com/stories/pngopacity/

Answer 2

Ich habe hier eine scheinbar sehr gute Lösung gefunden: Unit Interactive -> Labs -> Unit PNG Fix

aktualisieren Unit PNG ist auch auf einem zu sehen Liste der PNG-Korrekturoptionen auf NETTUTS

Hier sind die Highlights von ihrer Website:

• Sehr kompaktes Javascript:Unter 1 KB!
• Behebt einige Interaktivitätsprobleme, die durch das Filterattribut von IE verursacht werden.
• Funktioniert mit IMG-Objekten und Hintergrundbildattributen.
• Läuft automatisch.Sie müssen keine Klassen definieren oder Funktionen aufrufen.
• Ermöglicht Elemente mit automatischer Breite und automatischer Höhe.
• Super einfach zu implementieren.

Answer 3

• IE PNG Fix 2.0 was unterstützt background-position Und -repeat!

Auch 8-Bit-PNG mit Paletten Volle Alpha-Transparenz existieren, im Gegensatz zu dem, was Photoshop und GIMP Sie vielleicht glauben machen, und sie verschlechtern sich besser in IE6 – es reduziert nur die Transparenz auf 1-Bit.Verwenden pngquant um solche Dateien aus 24-Bit-PNGs zu generieren.

Answer 4

IE7.js bietet Unterstützung für PNGs (einschließlich Transparenz) in IE6.

Answer 5

Ich habe versucht, eine Website mit .pngs zu erstellen, aber es lohnt sich einfach nicht.Die Website wird langsam und Sie verwenden Hacks, die nicht zu 100 % funktionieren.Hier ist ein guter Artikel über einige Optionen, aber mein Rat ist, einen Weg zu finden, GIFs zum Laufen zu bringen, bis Sie IE6 nicht mehr unterstützen müssen.Oder geben Sie dem IE6 einfach ein schlechteres Erlebnis.

Answer 6

Die Verwendung von PNGs im IE6 ist kaum schwieriger als in jedem anderen Browser.Sie können alles in Ihrem CSS ohne Javascript unterstützen.Ich habe diesen Hack schon einmal gesehen ...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;
}

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}

Ich bin mir nicht sicher, ob es sich hierbei um gültiges CSS handelt, aber je nach Website ist es möglicherweise nicht so wichtig.

(Es ist erwähnenswert, dass die URL für das erste Bild auf dem Verzeichnis des Stylesheets basiert, während die zweite auf dem Verzeichnis der angezeigten Seite basiert – daher stimmen sie nicht überein.)

Answer 7

@Hboss

Das ist alles in Ordnung und gut, wenn Sie alle Dateien (und deren Abmessungen) genau kennen, die Sie anzeigen möchten – es wäre eine echte Mühe, diese CSS-Datei zu verwalten, aber ich denke, es wäre möglich.Wenn Sie transparente PNGs für einige sehr häufige Zwecke verwenden möchten:a) zufällige Grafiken wie Symbole (möglicherweise unterschiedlicher Größe), die auf jedem Hintergrund funktionieren, und b) sich wiederholende Hintergründe;dann bist du am Arsch.Jede Problemumgehung, die ich versucht habe, ist irgendwann auf einen Stolperstein gestoßen (Text kann nicht ausgewählt werden, wenn der Hintergrund transparent ist, Manchmal die Bilder werden in verrückten Größen angezeigt usw. usw.) und ich habe festgestellt, dass ich für maximale Zuverlässigkeit auf GIFs zurückgreifen muss.

Mein Rat ist, den PNG-Transparenz-Hack auszuprobieren, sich aber gleichzeitig darüber im Klaren zu sein, dass er definitiv nicht perfekt ist – und denken Sie daran, dass Sie sich für Benutzer von sehr viel Mühe geben ein Browser, der älter als 7 Jahre ist.Was ich heutzutage mache, ist, IE6-Benutzern bei ihrem ersten Besuch auf der Website ein Popup mit der freundlichen Erinnerung zu geben, dass ihr Browser veraltet ist und nicht die für moderne Websites erforderlichen Funktionen bietet, und obwohl wir unser Bestes geben werden Geben Sie Ihnen das Beste, Sie werden ein besseres Erlebnis auf unserer Website und im Internet als Ganzes haben, wenn Sie BLOODY WELL UPGRADED sind.

Answer 8

Ich glaube, dass alle Browser PNG-8 unterstützen.Es ist kein Alpha-Blending, hat aber transparente Hintergründe.

Answer 9

Ich könnte mich irren, aber ich bin mir ziemlich sicher, dass IE6 und weniger keine Transparenz bei PNG-Dateien bieten.

Das tust du irgendwie, und irgendwie auch nicht.

IE6 unterstützt sie nativ nicht.

Allerdings unterstützt der IE verrückte benutzerdefinierte Javascript-/CSS- und COM-Objekte (so wurde XmlHttpRequest ursprünglich implementiert).

Alle diese Hacks machen im Grunde Folgendes:

• Finden Sie alle PNG-Bilder
• Verwenden Sie einen DirectX-Bildfilter, um sie zu laden und ein transparentes Bild in einem Format zu erzeugen, das der IE versteht
• Ersetzen Sie die Bilder durch die gefilterte Kopie.

Answer 10

Eine Sache, über die man nachdenken sollte, sind E-Mail-Clients.Sie möchten oft PNG-24-Transparenz, aber in Outlook 2003 mit einem Computer, der IE6 verwendet.E-Mail-Clients erlauben keine CSS- oder JS-Tricks.

Hier ist eine gute Möglichkeit, damit umzugehen.http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/

Answer 11

Wenn Sie Ihre Bilder aus Fireworks als PNG-8 exportieren, verhalten sie sich genauso wie GIF-Bilder.Sie sehen also nicht beschissen und grau aus, Transparenz bleibt Transparenz, aber sie werden nicht die volle 24-Bit-Schönheit haben, die andere Browser bieten.

Möglicherweise wird Ihr Problem nicht vollständig gelöst, aber zumindest können Sie einen Teil des Weges erreichen, indem Sie sie einfach erneut exportieren.

Answer 12

Ich könnte mich irren, aber ich bin mir ziemlich sicher, dass IE6 und weniger keine Transparenz bei PNG-Dateien bieten.

Ich habe zwei „Lösungen“, die ich verwende.Erstellen Sie entweder GIF-Dateien mit Transparenz und verwenden Sie diese überall, oder verwenden Sie sie einfach für IE 6 und älter mit bedingten Stylesheets.Das zweite funktioniert wirklich nur, wenn Sie sie als Hintergrund usw. verwenden.