Gibt es einen JavaScript-PNG-Fix für IE6, der CSS-Hintergrundpositionierung ermöglicht?

Question

Ich habe ein paar Korrekturen gesehen, um PNG-Bildern Transparenz in Internet Explorer 6 zu ermöglichen, aber ich muss noch einen finden, mit dem Sie auch die Hintergrundposition in CSS festlegen können. Wenn Sie Sprites verwenden, ist dies ein Deal-Breaker. Ich benutze GIFs (die nicht so hochwertig sind), verwende keine transparenten Bilder oder verwende ein komplett anderes Stylesheet als IE6. Gibt es eine Lösung für IE6, die PNG-Folien UND Hintergrundpositionierung ermöglicht?

Answer 1

Ja. Konvertieren Sie Ihre Bilder, um indizierte Paletten zu verwenden (png256). Sie können Transparenz unterstützen (genau wie bei gif), aber keinen Alpha-Kanal.

Sie können dies mit Irfanview und das PNGout-Plugin, pngquant oder pngnq tun.

Das YUI-Performance-Team hat auch eine great presentation, die dies viele andere Bildoptimierungskonzepte behandelt.

Answer 2

This ist eine neue Technik, die im letzten Monat oder so aufgetaucht ist. Von der Seite:

In diesem Skript Image-Tags werden unterstützt, sowohl mit als auch ohne Leer Spacer GIF und PNG-Dateien Hintergrundbild positioniert werden können, sowie wiederholt, auch wenn sie kleiner als das Inhaltselement sie sind in.

Answer 3

Sie tatsächlich reine CSS zu bekommen positioniert Hintergrund-Bilder mit alpha-Transparenz in IE6 durch die Nutzung von IE6 Alpha Filter nehmen und die CSS clip Eigenschaft nutzen können. Julien Lecomte describes the technique on his blog.

Beachten Sie, dass diese Technik bei jeder Verwendung eines Alpha-Filters zu einem Leistungseinbruch führt.

Answer 4

Wenn der Hintergrund statisch ist, verwende ich TweakPNG, um den Hintergrundfarben-Chunk im PNG in die richtige Farbe zu ändern (anstelle der Standard-Graufarbe). Jeder reguläre Browser wird dies ignorieren, da der Alphakanal ihn außer Kraft setzt, aber IE6 und niedriger wird diese Farbe anstelle des Alphakanals verwenden.

Dies bedeutet, dass wir Transparenz in IE7 + haben, während sie sich in IE6 und niedriger schön verschlechtern. Und alle css Positionierung und Wiederholung sind möglich (weil es keine Hacks gibt!).

Answer 5

IE PNG Fix v2.0 hat die Unterstützung für vollständige alpha + position/repeat.

Answer 6

DD_belatedPNG.js funktioniert sehr gut