Wie sollte ich transparente PNGs in IE 6 über eine Hintergrundwiederholung verwenden?

Question

Der folgende Code enthält ein sich wiederholendes Hintergrundbild "thinline.png". Darüber hinaus sind 4-schichtige transparente PNGs: cardshadow.png, steel.png, startjobapplicationshadow.png und startapplication.png

Mein Ziel ist es, diesen Code in IE6 gut aussehen zu lassen, ohne andere Browser zu stören. Diese Eigenschaft von IE ist weitgehend dokumentiert, aber ich konnte es nicht zum Laufen bringen. Bitte geben Sie mir einige Ideen oder Beispiele, die mir helfen, dies zu lösen.

Danke. Mike

Der Code:

<div style="height: 333px; width: 100%; position: absolute; top: 68px; background-image:url(Resources/thinline.png); background-repeat:repeat-x; "> 
<div style="position: absolute; height: 300px; width: 215px; top: 15px; right: 50%; margin-right: -390px; z-index: 2; "> 
<img src="Resources/steel.png" style="position: absolute; top: 0px; z-index: 3;"/> 
<img src="Resources/cardshadow.png" style="position: absolute; top: 0px; margin-top: -8px; margin-left: -10px; z-index: 2"> 
<img src="Resources/startjobapplication.png" style="margin-left: -65px; position: relative; top: 258px; left: 50%; z-index: 5; display: block;"/> 
<img src="Resources/startjobapplicationshadow.png" style="margin-left: -67px; margin-top: -20px; position: relative; top: 258px; left: 50%; z-index: 4; display: block;"/> 

Answer 1

Verwenden Sie DD_belatedPNG.

Answer 2

Ich habe nicht getestet, aber Sie könnten this versuchen. Wenden Sie diese Klasse auf die entsprechenden Bilder an.

img.transparent { 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); 
} 

ich eine Kopie von IE6 nicht zur Verfügung haben, so kann ich nicht sicher, das funktioniert.

Ich fand auch this, die das Problem mit JS zu lösen scheint. Nach dem Lesen ein wenig mehr ist die letzte Lösung wahrscheinlich der beste Weg, damit umzugehen.

Answer 3

Werfen Sie einen Blick auf IE7 von Dean Edwards. Es ist eine Javascript-Bibliothek für Internet Explorer 6, die transparente PNGs korrekt arbeiten lässt, CSS-Fehler behebt und Unterstützung für zusätzliche CSS-Funktionen hinzufügt. Ich habe diese Bibliothek in der Vergangenheit mit einigem Erfolg verwendet (es ist einfacher als IE-spezifische CSS-Hacks hinzuzufügen.). Die Seite kann beim Laden jedoch kurz falsch aussehen.

Answer 4

gibt es ein Problem bei der Verwendung von Microsoft AlphaImageLoader für Hintergründe. Sie werden sich im Grunde nicht wiederholen.

Es gibt zwei Lösungen:

1. Wenn Ihr Bild gedehnt werden kann - dann entsprechende Einstellung verwenden in Alphaimageloader: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/file.png', sizingMethod='scale')

2. Wenn Ihr Bild nicht gestreckt werden kann, dann sollten Sie JavaScript-Lösung verwenden, wie IE PNG Fix v2.0 Alpha 3. Beachten Sie, dass es Microsofts .HTC-Dateien verwendet, die an den Browser mit einem bestimmten (text/x-component) Meta-Typ gesendet werden müssen, sonst wird es nicht funktionieren.

Answer 5

Für das Hintergrundbild, wenn Sie nicht mit Inline-Styles in Ihrem tatsächlichen Code sind und abhängig von Ihrem Hintergrundbild und akzeptablen Qualitätsverlust, können Sie die png als gif speichern und verwenden

* html .divclass {background-image:url(Resources/thinline.gif);} 

mit .divclass ist der Klassenname oder #id des div.

Die * html überschreibt das Hintergrundbild für IE6.