Artikeleinführung von Wulin.com (www.vevb.com): CSS Sprite, manchmal als Sprite- und Elf-Bild bezeichnet, ist ein Problem, das jede Begegnung mit Front-End-Öffnungen und auch eine übliche Methode für die Optimierung kleiner Bildladungen darstellt. Ich glaube, alle Schüler kennen das Prinzip, also werde ich nicht auf Details eingehen.
CSS Sprite, manchmal als Sprite und Sprite bezeichnet, ist ein Problem, das jedes Front-End öffnet und auch eine übliche Methode für die Optimierung der kleinen Bilderbelastung ist. Ich glaube, alle Schüler kennen das Prinzip, also werde ich nicht auf Details eingehen.
Ich war immer motiviert, HTML5 zu verwenden, um ein Werkzeug zur Synthese von Sprite -Bildern zu realisieren, das die schnelle Entwicklung kleiner Projekte erleichtert und einige mechanische Arbeitskräfte wie das Öffnen von Photoshop, Feuerwerk und andere Werkzeuge zum Kombinieren von Bildern reduziert. Vor kurzem habe ich mich endlich Zeit genommen, um es zu konzipieren und umzusetzen.
GO! PNG EINLEITUNG:Die aktuellen Funktionen sind wie folgt:
Anweisungen zur Verwendung: 1. Ziehen Sie die kleine Bilddatei in den Betriebsbereich, wie unten gezeigt: 2. Einstellungen der Eingabeklassenattribut sowie Zielbild- und CSS -Dateigenerierung, wie in der folgenden Abbildung gezeigt 3. Die generierte CSS -Datei kann durch Ändern der CSS -Vorlage angepasst werden.Die verwendete Vorlagenfunktion ist die Mikro-Templation von John Ressig.
Die Variablen, die verwendet werden können, sind:
Die Erklärungen von X, Y, W und H sind wie folgt:
Die Einstellungen der CSS -Vorlage sind wie folgt:
4. Nachdem Sie Zielbilder und CSS generiert haben, können Sie sie direkt herunterladenKlicken Sie auf die Schaltfläche Download, um den Download zu vervollständigen:
5. Export des ArbeitsstatusDiese Funktion kann Ihren aktuellen Arbeitsstatus, einschließlich der Bilddaten (Bilder, Bildstandortanordnung), Parametereinstellungen (einschließlich der Parametereinstellungen der Startseite und der CSS -Vorlageneinstellungen) in eine Datei exportieren. Sie können Ihren Arbeitsstatus beim nächsten Mal mit dieser Datei wiederherstellen.
Exportieren Sie die folgende Abbildung:
Importieren Sie die folgende Abbildung:
Kann wiederhergestellt werden: