El ' sprites de imagen ” es una técnica en la que se crea una imagen grande que consta de múltiples imágenes individuales. Y cualquier parte de la imagen grande se puede mostrar en relación con los requisitos de diseño. Ayuda a los desarrolladores a crear elementos visualmente atractivos sin problemas. Los sprites de imagen se pueden usar para iconos, botones y otros elementos gráficos. Este artículo demuestra el procedimiento paso a paso para usar sprites de imágenes en CSS.
Cómo usar I ¿Sprites de mago en CSS?
En CSS, los desarrolladores utilizan sprites de imágenes para minimizar/reducir el tiempo de carga de una página web. Ayuda a reducir las solicitudes HTTP, garantiza una carga más rápida y mejora el factor de experiencia del usuario. Por ejemplo, visite el siguiente ejemplo:
Ejemplo: uso de un objeto de imagen en un elemento de lista
En este ejemplo, se crea una lista ordenada y en cada elemento de la lista, parte de la imagen del sprite se muestra en la pantalla.
Requisito previo:
Para obtener la imagen específica del sprite de imagen, las dimensiones del sprite de imagen que se está utilizando son particularmente importantes. Por ejemplo, la imagen que tiene una dimensión de “ 937×156 ” se muestra a continuación:
Siga los pasos a continuación para mostrar una parte de la imagen que se muestra arriba:
Paso 1: creación de elementos de la lista
La lista desordenada se genera en la página web, como se ve en el siguiente fragmento de código:
< ul >Vacío: < eso identificación = 'vacío' > eso >
Medio: < eso identificación = 'medio' > eso >
Lleno: < eso identificación = 'lleno' > eso >
ul >
La descripción del fragmento de código anterior:
-
- En primer lugar, utilice el '
' etiqueta. - A continuación, asigne los identificadores de “ vacío ”, “ medio ' y ' lleno ” para tres elementos de la lista. Estos se utilizan más tarde para mostrar parte de la imagen más grande.
- En primer lugar, utilice el '
Paso 2: Mostrar la primera imagen
Para mostrar el corazón vacío en la página web, que es la primera imagen en el sprite de imagen. Utilizar el ' vacío ” id e inserte el siguiente código:
#vacío {ancho: 157px;
altura: 150px;
fondo: URL ( .. / sprite.jpg ) 0 0 ;
}
En la línea de códigos anterior:
-
- Primero, establezca el “ ancho ' y ' altura ” de la imagen que el desarrollador quiere mostrar en la página web.
- Estas propiedades se asignan a los valores de “ 157px ' y ' 150px ” de acuerdo con el ejemplo proporcionado anteriormente, pero pueden variar en relación con las imágenes con diferentes dimensiones.
- A continuación, proporcione la ruta del ' duende ” imagen a la “ fondo ' propiedad. Ahora, establezca la dirección de “ 0 ' y ' 0 ” y muestra la primera parte del sprite de la imagen.
Después de la ejecución de la línea de código anterior, la página web se ve así:
La instantánea anterior muestra que la primera imagen del sprite de imagen se muestra en la página web.
Paso 3: Visualización de la imagen media y última
Para mostrar la parte media y última de la imagen del sprite de la imagen, inserte las siguientes propiedades CSS:
#medio {ancho: 157px;
altura: 150px;
fondo: URL ( .. / sprite.jpg ) -462px 0px
}
#lleno {
ancho: 157px;
altura: 150px;
fondo: URL ( .. / sprite.jpg ) -770px 0px
}
La descripción del fragmento de código anterior:
-
- Primero, seleccione el “ medio id e inserte las mismas propiedades CSS que se utilizan en el paso anterior.
- Para mostrar la imagen central del sprite de imagen, cambie la dirección o asigne relleno desde el lado izquierdo. Por ejemplo, la dirección desde la izquierda se establece en ' negativo 462px ”.
- De la misma manera, muestre la última imagen configurando la dirección de la izquierda a “ -770px ”.
Después de la ejecución de las propiedades CSS anteriores, la página web aparece así:
La instantánea anterior muestra que las tres imágenes del sprite de imagen se han mostrado en la página web.
Conclusión
El ' sprites de imagen ” es una sola imagen grande que se compone de varias imágenes más pequeñas, al igual que la función de collage. Y se puede mostrar cualquier parte de la imagen grande que represente una imagen más pequeña. De acuerdo con los requisitos utilizando el ' fondo ” propiedad proporcionada por CSS. Para mostrar la imagen específica del sprite de la imagen, primero establezca el ancho y el alto de la imagen. Después de eso, utilice los valores de las direcciones para mostrar solo la parte de la imagen del sprite de la imagen.