Introducción al artículo de Wulin.com (www.vevb.com): CSS Sprite, a veces llamado imagen Sprite and Elf, es un problema que cada apertura frontal encuentra, y también es un método común de optimización de carga de imágenes pequeñas. Creo que todos los estudiantes conocen el principio, por lo que no entraré en detalles.
CSS Sprite, a veces llamado Sprite and Sprite, es un problema que se abre cada frontal y también es un método común de optimización de carga de imágenes pequeñas. Creo que todos los estudiantes conocen el principio, por lo que no entraré en detalles.
Siempre he estado motivado para usar HTML5 para realizar una herramienta para sintetizar imágenes de sprite, que facilita el rápido desarrollo de pequeños proyectos y reduce parte de mano de obra mecánica, como abrir Photoshop, fuegos artificiales y otras herramientas para combinar imágenes. Recientemente, finalmente me tomé el tiempo para concebirlo e implementarlo.
¡Ve! Png Introducción:Las funciones actuales son las siguientes:
Instrucciones para su uso: 1. Arrastre y suelte el archivo de imagen pequeña al área de operación, como se muestra a continuación: 2. Configuración de atributo de clase de entrada y generación de imágenes de imagen y archivo CSS, como se muestra en la figura a continuación 3. El archivo CSS generado se puede personalizar cambiando la plantilla CSS.La función de plantilla utilizada es la micro-templación de John Resig.
Las variables que se pueden usar son:
Las explicaciones de X, Y, W y H son las siguientes:
La configuración de la plantilla CSS es la siguiente:
4. Después de generar imágenes objetivo y CSS, puede descargarlas directamenteHaga clic en el botón Descargar para completar la descarga:
5. Exportación de estado laboralEsta función puede exportar su estado de trabajo actual, incluidos los datos de la imagen (imágenes, la disposición de ubicación de la imagen), la configuración de los parámetros (incluida la configuración de parámetros de la página de inicio y la configuración de la plantilla CSS), en un archivo, y puede restaurar su estado de trabajo la próxima vez utilizando este archivo.
Exportar la siguiente figura:
Importar la siguiente figura:
Se puede restaurar: