Ursprünglich war es nur ein PNG-transparentes Bild, das unter IE leicht zu lösen ist. Ich habe auch viele Methoden ausprobiert, einschließlich der JS-Methode, der Filter-CSS-Methode usw., aber ich habe das Gefühl, dass es insgesamt nicht perfekt ist, und wenn ich es verwende Gleichzeitig ist die Sprites-Methode nicht so einfach und leicht.
Schließlich habe ich festgestellt, dass die Verwendung der HTC-Methode zum Einbetten in CSS-Dateien grundsätzlich die meisten Transparenzprobleme auf einmal lösen kann.
Diese Methode wurde von vielen Leuten eingeführt, aber da die Seite auf Englisch ist, haben nur wenige Leute sie übersetzt und nur wenige Leute werden sie verwenden.
Diese Methode wird im Folgenden ausführlich vorgestellt:
Die Demoadresse dieser Methode selbst: http://www.twinhelix.com/css/iepngfix/demo/
(Wie gesagt, es ist alles auf Englisch, keine Sorge)
Kann gelöst werden durch:
1. Verwenden Sie das Tag „img“, um das transparente PNG-Bild zur Seite hinzuzufügen
2. Verwenden Sie den Hintergrund, um einen transparenten PNG-Hintergrund in CSS hinzuzufügen (unterstützt mehrere Versionen).
3. Einige Versionen des Hintergrund-PNG sind transparent und müssen durch Hinzufügen eines JS zur aktuellen Seite gelöst werden.
Dateipaket herunterladen: http://www.twinhelix.com/css/iepngfix/iepngfix.zip
1. Nach dem Herunterladen und Entpacken sind viele Dateien vorhanden, darunter drei Dateien, die wir verwenden müssen:
iepngfix.htc, blank.gif, iepngfix_tilebg.js
2. Sie können sie in die entsprechenden CSS-, JS- und Bilderverzeichnisse übertragen. Natürlich können Sie auch einen neuen Ordner erstellen, beispielsweise einen Ordner mit dem Namen: iepng, und sie dorthin übertragen.
3. Fügen Sie den ersten Codesatz hinzu. Vergessen Sie nicht, den Pfad der HTC-Datei zu ändern. Wenn Sie Fehler befürchten, verwenden Sie direkt den Pfad relativ zum Stammverzeichnis als /iepng/iepngfix.htc. Dies funktioniert im Allgemeinen nicht. Natürlich können Sie auch behaviour: url (iepngfix.htc) zu Ihrer Datei reset.css hinzufügen
| <style type="text/css"> img, div { Verhalten: url(iepngfix.htc); </style> |
4. Öffnen Sie mit Notepad oder einem ähnlichen Tool die Datei iepngfix.htc und ersetzen Sie den Dateipfad von blankImg entsprechend Ihrer tatsächlichen Situation durch Ihren eigenen, z. B. /iepng/blank.gif.
| IEPNGFix.blankImg = '/images/blank.gif'; |
5. Fügen Sie den folgenden js-Aufrufcode zum „Kopf“ der erforderlichen Seite hinzu (dieser Schritt ist nicht erforderlich. Wenn Ihr Include im Kopfteil einheitlich aufgerufen wird, wird empfohlen, diesen Satz hinzuzufügen.)
| <script type="text/javascript" src="iepngfix_tilebg.js"></script> |
Nach den oben genannten Schritten können Sie grundsätzlich den transparenten Effekt von PNG unter IE erzielen.