GO! PNG: Outils pour synthétiser les images CSS Sprite avec HTML5

Introduction de l'article de wulin.com (www.vevb.com): CSS Sprite, parfois appelé sprite et elfe, est un problème que chaque ouverture frontale rencontre, et est également une méthode courante d'optimisation de chargement de petite image. Je crois que tous les étudiants connaissent le principe, donc je n'entrerai pas dans les détails.

CSS Sprite, parfois appelé sprite et sprite, est un problème que chaque frontal s'ouvre et est également une méthode courante d'optimisation de chargement de petite image. Je crois que tous les étudiants connaissent le principe, donc je n'entrerai pas dans les détails.

J'ai toujours été motivé à utiliser HTML5 pour réaliser un outil pour synthétiser les images de Sprite, ce qui facilite le développement rapide de petits projets et réduit un peu de travail mécanique tel que l'ouverture de Photoshop, des feux d'artifice et d'autres outils pour combiner des images. Récemment, j'ai finalement pris le temps de la concevoir et de la mettre en œuvre.

GO! PNG Introduction:

Les fonctions actuelles sont les suivantes:

Instructions pour une utilisation: 1. Faites glisser et déposez le petit fichier d'image dans la zone d'opération, comme indiqué ci-dessous:

2. Paramètres d'attribut de classe d'entrée et génération de fichiers d'image cible et CSS, comme indiqué dans la figure ci-dessous

3. Le fichier CSS généré peut être personnalisé en modifiant le modèle CSS.

La fonction de modèle utilisée est la micro-templation de John Resig.

Les variables qui peuvent être utilisées sont:

Les explications de X, Y, W et H sont les suivantes:

Les paramètres du modèle CSS sont les suivants:

4. Après avoir généré des images cibles et CSS, vous pouvez les télécharger directement

Cliquez sur le bouton de téléchargement pour terminer le téléchargement:

5. Exportation du statut de travail

Cette fonction peut exporter votre état de travail actuel, y compris les données d'image (images, disposition d'emplacement de l'image), paramètres de paramètres (y compris les paramètres de paramètres de page d'accueil et les paramètres du modèle CSS), dans un fichier, et vous pouvez restaurer votre statut de travail la prochaine fois à l'aide de ce fichier.

Exporter la figure suivante:

Importez le chiffre suivant:

Peut être restauré: