Sprites de CSS (Sprites)

La técnica CSS Sprites es un método para reducir el número de solicitudes HTTP emitidas para los recursos de imágenes mediante la combinación de imágenes en un solo archivo.

¿Qué es un sprite?

Los subespacios son imágenes bidimensionales, compuestas por la combinación de imágenes pequeñas en grandes imágenes bajo las coordenadas X e Y definidas.

Para mostrar una imagen individual de la imagen combinada, se puede hacer mediante el uso de CSS background-positionAtributo, define la posición exacta de la imagen que se debe mostrar.

Ventajas del uso de CSS Image Sprite

Las páginas web con muchas imágenes, especialmente muchas imágenes pequeñas (como íconos, botones, etc.), pueden tardar mucho tiempo en cargarse y generar múltiples solicitudes de servidor.

El uso de sprites de imágenes en lugar de imágenes individuales reducirá significativamente el número de solicitudes HTTP que envía el navegador al servidor, lo que es muy efectivo para acortar el tiempo de carga de la página web y el rendimiento general del sitio web.

Revise el siguiente ejemplo y verá una diferencia evidente. Cuando coloca el puntero del ratón sobre el ícono del navegador en versión no Sprite por primera vez, aparecerá una imagen de suspensión después de un tiempo, porque la imagen de suspensión se carga desde el servidor cuando el ratón está suspendido, ya que la imagen normal y la imagen de suspensión son dos imágenes diferentes.

y en la versión de Sprite, ya que todas las imágenes se combinan en una única imagen, al pasar el ratón sobre ella se muestra inmediatamente la imagen de ratón sobre, produciendo un efecto de hover suave. Al usar CSS Sprite, el usuario puede reducir el número de solicitudes HTTP y el tamaño total del archivo, lo que mejora la eficiencia de acceso.

hacer que la imagen de espíritu

a través de10combinar una imagen (mySprite.png）para crear esta imagen de espíritu. Puede usar cualquier herramienta de edición de imágenes que prefiera para crear su propia imagen de espíritu.

Mostrar ícono desde la imagen de espíritu

Finalmente, utilizando CSS, podemos mostrar solo una parte necesaria de la imagen de espíritu.

Primero, crearemos la clase .sprite que cargará la imagen de espíritu. Esto se hace para evitar la repetición, ya que todos los elementos comparten la misma imagen de fondo.

.sprite {
　　　　background: url("images/mySprite.png) no-repeticion;
}

Ahora, debemos definir una clase para cada elemento que queremos mostrar. Por ejemplo, para mostrar el ícono de Internet Explorer, el código de CSS para la imagen de espíritu será.

.ie {
　　　　ancho:　50px;　/*　Ancho del ícono　*/
　　　　height:　50px;　/*　Altura del ícono　*/
　　　　display: inline-block;　/*　Mostrar ícono como bloque en línea　*/
　　　　background-position: 0　-200px;　/*　Icono de fondo de posición en sprite　*/
}

Ahora ha surgido un problema, ¿cómo obtenemos estos valores de píxelesbackground-position¿Cómo podemos encontrar la respuesta? El primer valor es la posición horizontal delposición horizontal，la segunda es la posición horizontal delposición vertical. Debido a que la esquina superior izquierda del ícono de Internet Explorer toca el borde izquierdo, su distancia horizontal desde el punto de partida (es decir, la esquina superior izquierda de la imagen de espíritu) es0y, dado que se encuentra en el5ubicación,por lo tanto, su distancia vertical desde el punto de partida es la posición de la imagen de espíritu4 X 50px = 200px, ya que la altura de cada ícono es50px

Para mostrar el ícono de Internet Explorer, debemos mover su esquina superior izquierda al punto de partida, es decir, la esquina superior izquierda de la imagen de espíritu (mySprite.png). Además, dado que la distancia vertical de este ícono es200px，por lo tanto, necesitamos mover toda la imagen de fondo (mySprite.png) hacia arriba verticalmente200px，esto requiere que apliquemos el valor como número negativo-200px，porque los valores negativos lo mueven hacia arriba verticalmente, mientras que los valores positivos lo hacen hacia abajo. Sin embargo, no necesita desplazamiento horizontal, ya que en la esquina superior izquierda del ícono de Internet Explorer no hay píxeles.

Using CSS Image Sprite to create navigation menu

In the previous section, we learned how to display a single icon from the image sprite. This is the simplest way to use image sprites, and now we will build aFlip effectTaking a step forward in the navigation menu.

Here, we will use the same sprite image (mySprite.png）to create the navigation menu.

Navigation basic HTML

We will start by creating a navigation menu with HTML unordered listNavigation menu starts.

<ul class="menu">
　　　　<li class="firefox"><a href="#">Firefox</a></li>
　　　　<li class="chrome"><a href="#">Chrome</a></li>
　　　　<li class="ie"><a href="#">Explorer</a></li>
　　　　<li class="opera"><a href="#">Opera</a></li>
　　　　<li class="safari"><a href="#">Safari</a></li>
</ul>

Apply CSS to navigation

The following sections will introduce how to use CSS to convert the simple unordered list given in the example into a navigation based on malicious images.

Pasos1: Reset list structure

By default, HTML unordered listDisplay as list item. We need to uselist-style-typeThe property is set to remove the default list item symbol none.

ul.menu {
　　　　list-style-type: none;
}
ul.menu li {
　　　　padding:　5px;
　　　　font-size:　16px;
　　　　font-family: "Trebuchet MS", Arial, sans-serif;
}

Pasos2: Set common properties for each link

In this step, we will set all the common CSS properties that all links will share. For example:color,background-image,display,paddingetc.

ul.menu li a {
　　　　height:　50px;
　　　　line-height:　50px;
　　　　display: inline-block;
　　　　padding-left:　60px;　/*　To sift text off the background-image　*/
　　　　color: #3E789F;
　　　　background: url("images/mySprite.png) no-repeticion;　/*　Como todos los enlaces comparten el mismo fondo-image　*/
}

Pasos3: establecer el estado predeterminado de cada enlace

Ahora, debemos definir una clase para cada elemento del menú, porque cada ítem dentro del sprite de imagen tienebackground-position. Por ejemplo, el ícono Firefox está en el punto de partida del sprite de imagen, es decir, en la esquina superior izquierda, por lo que no es necesario mover la imagen de fondo. Por lo tanto, en este caso, la posición vertical y horizontal del fondo será 0. Del mismo modo, puede definir la posición de fondo para otros íconos dentro del sprite de imagen.

ul.menu li.firefox a {
　　　　background-position: 0 0;
}
ul.menu li.chrome a {
　　　　background-position: 0　-100px;
}
ul.menu li.ie a {
　　　　background-position: 0　-200px;
}
ul.menu li.safari a {
　　　　background-position: 0　-300px;
}
ul.menu li.opera a {
　　　　background-position: 0　-400px;
}

Pasos4: agregar el estado de suspensión del enlace

Agregar el estado de suspensión es el mismo principio que agregar los enlaces anteriores. Simplemente mueve sus esquinas superiores izquierda a la partida del sprite de imagen (es decir, la esquina superior izquierda), como lo hemos hecho anteriormente. Puedebackground-positionSe puede calcular simplemente con la siguiente fórmula:

La posición vertical del estado de suspensión = la posición vertical del estado normal - 50px

Debido a que la imagen de suspensión del ratón está justo debajo del estado predeterminado, la altura de cada ícono es igual a50px. El estado de suspensión del ícono no necesita desplazamiento horizontal, ya que no hay píxeles antes de la esquina superior izquierda del ícono.

ul.menu li.firefox a:hover {
　　　　background-position: 0　-50px;
}
ul.menu li.chrome a:hover {
　　　　background-position: 0　-150px;
}
ul.menu li.ie a:hover {
　　　　background-position: 0　-250px;
}
ul.menu li.safari a:hover {
　　　　background-position: 0　-350px;
}
ul.menu li.opera a:hover {
　　　　background-position: 0　-450px;
}

¡Hecho! Después de combinar todo el proceso, este es nuestro código HTML y CSS final: