Für CSS-Hintergrundbilder
.yourselector {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}Kann nicht mit wiederholenden Bildern verwendet werden, benötigt feste Breite und Höhe.
Für Inline-HTML-Bilder
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}Dies erfordert ein transparentes GIF-Bild mit 1x1px.
tolles Code-Stück. Erinnerte mich an mein Lesezeichen, das ich vor ein paar Tagen gesetzt habe… jetzt brauche ich dieses Code-Stück für ein Projekt. Danke!
Validator??
Die Hacks sind kein gültiges CSS, aber da die Hacks nur für IE<7 benötigt werden, können Sie bedingte Kommentare verwenden, sodass der Validator und Browser mit PNG-Alpha-Transparenzunterstützung die Hacks nicht sehen.
Sie können dies tun, indem Sie die IE PNG Fix Hacks in eine separate Stylesheet (oder in CSS zusammen mit anderen Hacks für IE<7) legen und sie dann wie folgt in Ihrem HTML verlinken:
IE<7 sieht iepngfix.css und behebt Ihre PNGs, während alle anderen (einschließlich Validatoren) es als HTML-Kommentar sehen und es nicht lesen, sodass Ihre Seite fehlerfrei validiert.Die AlphaImageLoader-Hacks sind kein gültiges CSS, aber da diese Hacks nur für IE 5.5 und IE 6 sind, können Sie bedingte Kommentare verwenden, sodass der Validator und Browser mit PNG-Alpha-Transparenzunterstützung die Hacks nicht sehen.
Sie können dies tun, indem Sie die IE PNG Fix Hacks in eine separate Stylesheet (oder in eine Stylesheet zusammen mit anderen Hacks für IE 5.5 und IE 6) legen und sie dann wie folgt in Ihrem HTML verlinken:
<!--[if lt IE 7]>
IE 5.5 und IE 6 sehen iepngfix.css und beheben Ihre PNGs, IE 5.0 überspringt es, da es AlphaImageLoader nicht kennt, während alle anderen Browser und alle Validatoren es als HTML-Kommentar sehen und nichts darin lesen, sodass Ihre Seite fehlerfrei validiert.<link rel="stylesheet" type="text/css" media="screen, projection" href="iepngfix.css">
<![endif]-->
Ich bekomme einen überlagernden Container über meinen Bildern… was auf ein fehlendes Bild hinweist, über den PNG-Bildern, die ich eingefügt habe. Die Transparenz des PNG wird trotzdem entfernt. Aber diese Überlagerung verursacht ein Problem.
Dann kann dieses.src = "images/transparent.gif" nicht gefunden werden.
Für Inline-HTML-Bilder muss "images/transparent.gif" ein transparentes GIF-Bild mit 1x1 Pixel sein. Dann wird die Bildüberlagerung unsichtbar, was Ihr Problem löst.
Ich hatte ein weiteres Problem damit: Bei PNG-Hintergründen gelangen Links, die ursprünglich über dem PNG-Hintergrundbild lagen, nach Anwendung dieses Hacks dahinter (weil die Überlagerung des Hacks über den Links liegt).
Ich habe dies gelöst, indem ich vor dem ursprünglichen DIV mit dem PNG-Hintergrund und den Links (Klasse "header") ein zusätzliches (nur IE<7) leeres DIV (Klasse "header-ie") hinzugefügt habe, dem ich die gleiche Breite und Höhe wie dem ursprünglichen DIV gegeben habe. Dann habe ich den Hintergrund des ursprünglichen DIVs für IE<7 auf none gesetzt und den obigen Filter-Hack auf das zusätzliche, nur für IE<7 vorgesehene DIV angewendet und es absolut und das ursprüngliche DIV relativ positioniert, sodass das ursprüngliche DIV mit den Links über dem zusätzlichen IE<7-DIV mit dem gefilterten PNG-Hintergrund lag.
Dann waren die Links endlich wieder klickbar, während die PNG-Transparenz auch in IE<7 funktionierte.
Dies führte zu folgendem CSS:
.header-ie,.header {
_width: 800px;
_height: 30px;
_background: none;
}
.header-ie {
_position: absolute;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/header.png',sizingMethod='crop');
}
.header {
_position: relative;
}
Ich habe mir kürzlich angesehen, wie diese Technik verwendet wird, und in Verbindung mit Gzip kann der Browser die Seite nicht laden.
Ich benutze das DD_belatedPNG-Skript für meine Website! Es funktioniert für mich großartig. Dieses Skript unterstützt auch wiederholende Hintergründe sowie Inline-Bilder. Und übrigens, diese Lösung ist in einem WordPress-Plugin namens HITS- IE6 PNGFix enthalten.
Ich stimme Pavel zu 100 % zu, DD_belatedPNG ist NOCH BESSER als diese Option hier!
Gründe
– Funktioniert perfekt für IE 5.5 UND 6.
– Sie müssen keine zusätzlichen Dateien wie ein 1x1 Bild erstellen (obwohl das kein wirkliches Problem ist. Aber es ist trotzdem ein Pluspunkt).
– Sie KÖNNEN es für wiederholende Hintergründe verwenden. Ich verwende es für ein Punktmuster über einem Bild und es funktioniert perfekt.
– Generiert keine zusätzliche Ladezeit für Ihre Website. Zumindest bei den Tests, die ich bisher gemacht habe.
– Alles, was Sie tun müssen, ist, die JS-Datei über das Skript-Tag aufzurufen.
Und dann rufen Sie die Funktion auf, indem Sie den NAMEN einer Klasse definieren, die Sie als "Fixer" verwenden möchten, wie hier:
DD_belatedPNG.fix(‘.pngfix’);
Nehmen wir an, Sie haben hier ein div mit einem PNG-Bild als Hintergrund.
Also machen Sie es so:
Und Sie sind fertig! Das Skript erledigt den Rest.
Ich weiß, ich klinge wie ein Verkäufer, aber Open-Source-Skripte, die Leben retten, verdienen ihre Bedeutung, da sie meine Arbeit viel einfacher gemacht haben. Ich denke, das sollte hier als Hinweis hinzugefügt werden.
Dies funktioniert nicht mit Bildskalierung, was schade ist.
Diese Lösung funktioniert für mich, aber nur bei nicht-interaktiver Platzierung von Bildern.
Das heißt, Bildersetzungs-Rollover-Links funktionieren einwandfrei, aber ich konnte das :hover-Bild nicht anzeigen lassen.
Danke nochmal, dass du diese Seite am Leben hältst, Chris, da sie immer noch eines meiner "abgenutzten" Lesezeichen ist.
Diese Lösung funktioniert für mich, aber was ist, wenn wir das PNG-Bild als Hintergrund verwenden, was ist in diesem Fall die Lösung????
Neu in vielem davon. Wenn ich dieses Skript verwende, ist "yourimage.png" das gute PNG-Bild als PNG 32, PNG 24 oder PNG 8? Genau welches Bild verwende ich dort? Ich kenne den .selector, den ich verwenden soll, je nachdem, wo sich das PNG befindet.
Mache ich das zusätzlich für jedes Bild?
Dieser Code ist sehr nützlich für mich, um PNG-Bilder als Hintergrund im IE6-Browser zu reparieren, danke für die Lösung.
Hallo Santosh, kannst du mir bitte helfen, indem du mir das Verfahren zur Verwendung dieses Skripts für CSS-Hintergrundbilder zur Verfügung stellst? Bei mir funktioniert es für HTML-Elemente. Ich habe Probleme bei der Behebung für CSS-Hintergrundbilder. Vielen Dank im Voraus!
Was ist mit keiner zusätzlichen Klasse und CSS-Formatierung?
Nur die Umwandlung von 24-Bit-PNGs in 8-Bit-PNGs mit Alpha-Transparenz auch für IE6.
Ein nettes Werkzeug dafür ist ImageAlpha, eine GUI für pngnq und pngquant (die die Magie vollbringt).
Die kostenlose App finden Sie hier:
http://pornel.net/imagealpha
(nur OS X)
Danke für dieses Skript, es hat mich cool gemacht, als ich Probleme mit ie6 hatte; aber als ich dieses Skript für CSS-Hintergrundbilder ausprobierte, funktionierte es nicht richtig. Keine Änderung ist eingetreten. Können Sie mir bitte diesbezüglich helfen, damit meine Dinge einfacher werden, nochmals vielen Dank im Voraus.
Dieser Code ist für mich sehr nützlich, um PNG-Bilder als Hintergrund im IE6-Browser zu reparieren, vielen Dank :)
Wenn Sie ein echtes Beispiel mit diesem Code geben würden, wäre es für Anfänger sehr nützlich.
danke
hamza khan
Ich weiß nicht warum, aber es funktioniert bei mir nicht.
Ich benutze das PNG als Hintergrund, aber es funktioniert nicht.
clever…clever…clever! Danke!
Die Anwendung dieses Stils auf ein DIV, das ein Eingabefeld oder ein Textfeld enthält, führt dazu, dass man nicht hineinklicken und Text eingeben kann. Ich dachte, ich könnte es mit z-index beheben, aber kein Glück. Es ist entweder ein hässliches Eingabeformular oder ein nutzloses Eingabeformular!
CSS-Hintergrundbildbeispiel funktioniert großartig.
Wenn es bei jemandem nicht funktioniert
Der Pfad zum Bild kann nicht relativ sein. Beispiel: Wenn er mit "../" beginnt, wie es bei vielen CSS-Hintergrundbild-URLs der Fall ist, funktioniert er nicht. Stellen Sie sicher, dass er mit "/" beginnt.
Entschuldigung Leute, nichts funktioniert. Einfach ein voller Flop. Glauben Sie mir, wenn ich SCHWER BEWAFFNET wäre, würde ich jeden einzelnen Entwickler auf dem Microsoft Campus WELTWEIT gehen und töten!!! :-(
Ich benutze diesen Code in meinem CSS, aber er funktioniert bei mir nicht, obwohl ich ihn in UL verwende und es die Eigenschaft position:absolute darauf hat.
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);
Jeder Vorschlag ist wirklich hilfreich.
Nun, ich kann keine der online gefundenen Tricks für IE finden, die mir helfen. Der IE zeigt die Bilder meiner Seite nicht richtig an, tatsächlich werden sie überall angezeigt, aber nicht am Rand fixiert, wie es sein sollte. Hilfe bitte.
Danke… es hat funktioniert!!!
Ihr seid alle schlau… IE ist dumm… Windows ist noch dümmer, dass es dieses Problem nicht erkennen kann.
ausgezeichnet. Es funktioniert für mich.