Introducción a los sprites CSS
Generalmente se traduce como "unión de imágenes CSS" o "posicionamiento de texturas CSS". CSS Sprites no es una tecnología nueva. Se ha desarrollado de manera relativamente madura en el desarrollo web. La sombra de CSS Sprites se puede encontrar en todas partes en las páginas web de las subsidiarias de Alibaba. Pero CSS Sprites no es una regla de oro, pero en muchos casos tiene ciertas ventajas. La más importante es que puede reducir la carga en el servidor y mejorar la velocidad de carga de las páginas web. A medida que el diseño web se desarrolla en una dirección más sofisticada e ingeniosa, los diseñadores comienzan a considerar el uso de métodos que no son de Javascript para crear efectos de menú al pasar el mouse. En este momento, surgió CSS Sprite.
Para decirlo sin rodeos, CSS Sprites en realidad integra algunas imágenes de fondo de la página web en un archivo de imagen y luego usa la combinación de CSS "imagen de fondo", "repetición de fondo" y "posición de fondo" para posicionar el fondo. La posición puede utilizar números para localizar con precisión la posición de la imagen de fondo.
Cuando se carga la página, en lugar de cargar cada imagen individual, se carga toda la imagen combinada a la vez. Esta es una gran mejora. Reduce en gran medida la cantidad de solicitudes HTTP, reduce la presión del servidor y acorta el tiempo necesario para cargar imágenes al pasar el mouse, lo que hace que el efecto sea más fluido y sin pausas.
Artículos relacionados con CSS Sprites
Aplicación CSS Sprites
En este sentido, Taobao lo hace mejor. Tomemos a Taobao como ejemplo.
Ejemplo 1: navegación de la página del canal Taobao
Representación:
diagrama de sprites:
