¿Cómo planificar la imagen del sprite para el sitio?

¿Qué tipos de imágenes de sprites están disponibles generalmente? ¿Cuál debería ser el tamaño de la imagen del sprite? ¿Cómo arreglarlo? ¿Cómo se distribuyen los sprites en el sitio? ¿Alguna vez te has preocupado por los problemas anteriores? Con las preguntas anteriores en mente, analicemos cómo planificar la imagen del sprite del sitio de manera más razonable. En primer lugar, recordemos qué tipos de imágenes materiales se utilizaban al cortar páginas en el pasado. Estoy pensando mucho... Estoy pensando mucho... Probablemente incluyan: botones, iconos, otras imágenes de fondo de tamaño fijo, imágenes de fondo en mosaico horizontal y vertical, imágenes de fondo en mosaico horizontal, imágenes de fondo en mosaico vertical, izquierda y derecha. imágenes de fondo adaptables a la derecha e imágenes de fondo adaptables superior e inferior, imágenes de fondo más grandes y de colores brillantes. Parece un poco confuso, así que dividámoslo en categorías. Según el alcance utilizado por la imagen de sprite, se puede dividir en: general entre proyectos, global, nivel de columna y nivel de página. Según el método de implementación de la imagen de sprite, se puede dividir en: imagen de sprite de tamaño fijo, horizontal. imagen de sprite, imagen de sprite vertical (menos comúnmente utilizada), imágenes de fondo en mosaico horizontales y verticales (menos utilizadas)? 0? 2 Luego, clasifiquemos las imágenes de materiales que recordamos en las siguientes categorías: Por alcance: estos materiales pueden aparecer en diferentes alcances en diferentes sitios según el método de implementación: Imágenes de sprites de tamaño fijo: botones, íconos, otras imágenes de fondo de tamaño fijo, imágenes de fondo con colores brillantes y tamaños grandes. Imágenes de sprites horizontales: imágenes de fondo dispuestas horizontalmente, adaptables a izquierda y derecha. imágenes de fondo (implementación sin usar la cuadrícula de nueve cuadrados) imágenes de sprites verticales Figura: Imagen de fondo en mosaico vertical, imagen de fondo adaptable superior e inferior (no utiliza la implementación de la cuadrícula de nueve cuadrados) Imagen de fondo en mosaico horizontal y vertical: este tipo de imagen no Se sintetiza en una imagen de sprite y generalmente se usa para patrones de fondo de páginas web. Rara vez aparece en la mayoría de los sitios. Finalmente, considerando la viabilidad del sitio, ¿cuántas imágenes de sprites deberíamos crear? Eche un vistazo a la siguiente tabla: De la tabla, podemos analizar que el número de solicitudes de imágenes de fondo en una página es: ¿Te sorprende ver las más comunes? Jaja, de hecho, rara vez sucede que se utilicen todas. Según la situación real de la página, la cantidad de solicitudes no será muy grande en comparación con la cantidad de solicitudes de imágenes de fondo en la primera leyenda. mucho más claro y el número de solicitudes también se reduce mucho. ¿Hay algo particular acerca de cómo cortar, distribuir y nombrar estas imágenes? Las siguientes son mis opiniones y sugerencias personales: ?0?2 Utilice un ancho de 20 píxeles para mosaicos horizontales. El uso de un ancho de 1 px para mosaicos horizontales causará problemas de rendimiento de renderizado. No entraré en detalles. Busque en línea y encontrará ejemplos relevantes. Una imagen de sprite de tamaño fijo generalmente se puede configurar de modo que su ancho sea la mitad del ancho de la página web y su altura aumente con el contenido de la imagen. Debido a que es posible que no esté seguro de qué tamaño usar antes de cortar la imagen, mi opinión es que en la etapa posterior del corte de la imagen, es posible que no necesite usar una imagen de repetición x.png separada para colocar el fondo adaptable izquierdo y derecho. En la mayoría de los casos, usaremos 2 Cada etiqueta utiliza un método de puerta corredera para lograr un fondo adaptable de izquierda a derecha, y la mitad del ancho de la página puede lograr un fondo adaptable de izquierda a derecha con el ancho máximo. -fondo adaptable derecho en esta imagen de sprite y combínelo. Hay un intervalo de 1 píxel entre imágenes de un tamaño fijo para evitar que las imágenes adyacentes sean visibles cuando el navegador hace zoom. El nombre de la imagen de sprite a nivel de columna se nombra de acuerdo con. el nombre del directorio a nivel de columna y el nombre de la imagen del sprite a nivel de página. Nombre según el nombre de la página. Lo mismo se aplica a las clases de componentes y los sprites de clases de máscara. Otros se pueden nombrar según los nombres en la tabla. Es más fácil distinguir y luego administrar los componentes que son comunes en todos los proyectos o si un determinado componente tiene un contenido de imagen grande y se modifica con frecuencia. Cree un diagrama de componentes separado y asígnele un nombre según el nombre del componente para facilitar la administración. Con muchos íconos globales, puede considerar hacer un diagrama de sprites separado para los íconos. Se recomienda que los íconos se implementen usando una nueva etiqueta en lugar de usar directamente la etiqueta con el contenido, de modo que deba dejar algunos. espacio entre el ícono del sprite y el ícono. Además, cuando encuentre diferentes alturas de línea, para centrar verticalmente el fondo del ícono, debe restablecer la posición del fondo. Este método de implementación no es propicio para la inclusión. Algunas experiencias y opiniones personales, solo como referencia. Si tiene buenas sugerencias y opiniones sobre la planificación de imágenes de sprites, deje un mensaje para discutirlo juntos.