CSS Sprite (Sprite)

La tecnologia CSS Sprites è un metodo per ridurre il numero di richieste HTTP emesse per le risorse di immagine attraverso la combinazione delle immagini in un singolo file.

Cos'è un'animazione di immagine

Un'animazione di immagine è un'immagine bidimensionale, formata dalla combinazione di piccole immagini in un'immagine grande sotto i coordinate X e Y definite.

Per visualizzare un'immagine singola all'interno di un'immagine combinata, è possibile utilizzare CSS background-positionProprietà, definire la posizione esatta dell'immagine da visualizzare.

Vantaggi dell'uso di CSS Image Sprite

Le pagine con molte immagini, in particolare molte immagini piccole (ad esempio, icone, pulsanti ecc.), potrebbero richiedere molto tempo per caricarsi e generare molte richieste server.

L'uso di animazioni di immagine invece di immagini singole ridurrà notevolmente il numero di richieste HTTP inviate dal browser al server, il che è molto efficace per abbreviare il tempo di caricamento della pagina web e le prestazioni complessive del sito web.

Vediamo un esempio qui sotto, vedrete una differenza significativa. Quando mettete il puntatore del mouse su un'icona del browser non Sprite per la prima volta, l'immagine di hover appare dopo un breve intervallo di tempo, perché l'immagine di hover viene caricata dal server quando il mouse si posiziona sopra, poiché l'immagine normale e l'immagine di hover sono due immagini diverse.

Nella versione Sprite, poiché tutte le immagini sono combinate in un'unica immagine, l'immagine di hover viene visualizzata immediatamente quando il mouse si posiziona sopra, producendo un effetto di hover fluido. Utilizzando CSS Sprite, l'utente può accedere all'immagine combinata, riducendo il numero di richieste HTTP e riducendo la dimensione complessiva del file, migliorando l'efficienza dell'accesso.

Rendi l'animazione di immagine

Abbiamo combinato 10 immagini singole in un'unica immagine (mySprite.pngPer creare questa immagine animata, puoi utilizzare qualsiasi strumento di editing di immagini preferito per creare la tua animazione.

Visualizzazione dell'icona dall'immagine animata

Infine, utilizzando CSS, possiamo visualizzare solo una parte dell'immagine animata.

Prima di tutto, creeremo la classe .sprite che caricherà l'immagine animata. Questo per evitare la ripetizione, poiché tutti gli elementi condividono la stessa immagine di sfondo.

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

Ora, dobbiamo definire una classe per ogni elemento da visualizzare. Ad esempio, per visualizzare l'icona di Internet Explorer, l'animazione di immagine sarà il codice CSS.

.ie {
　　　　width: 50px; /* Larghezza dell'icona */
　　　　height: 50px; /* Altezza dell'icona */
　　　　display: inline-block; /* Mostra l'icona come blocco inline */
　　　　background-position: 0 -200px; /* Posizione di sfondo dell'icona nel sprite */
}

Ora sorge un problema, come possiamo ottenere questi valori di pixelbackground-position？Facciamo il punto.posizione orizzontalela seconda è la posizione orizzontale delposizione verticale。Poiché l'angolo in alto a sinistra dell'icona di Internet Explorer tocca il margine sinistro, la sua distanza orizzontale dall'origine (ovvero l'angolo in alto a sinistra dell'immagine di sprite) è0e poiché si trova nel5 posizioniquindi la distanza verticale tra l'origine e la posizione dell'icona di sprite è 4 x 50px = 200px, poiché l'altezza di ogni'icona è50px。

Per mostrare l'icona di Internet Explorer, dobbiamo muovere l'angolo in alto a sinistra a partenza, ovvero l'angolo in alto a sinistra dell'immagine di sprite (mySprite.png). Inoltre, poiché la distanza verticale di questo'icona è200pxquindi dobbiamo muovere l'intera immagine di sfondo (mySprite.png) verso l'alto200pxquello richiede di applicare i valori come numeri negativi-200pxpoiché i valori negativi lo muoveranno verso l'alto verticalmente, mentre i valori positivi lo muoveranno verso il basso. Tuttavia, non richiede un offset orizzontale, poiché l'angolo in alto a sinistra dell'icona di Internet Explorer non ha pixel precedenti.

Creazione del menu di navigazione utilizzando CSS Image Sprite

Nella sezione precedente, abbiamo imparato come mostrare un singolo'icona nell'immagine di sprite. Questo è il metodo più semplice per utilizzare un'immagine di sprite, ora passeremo a costruire uneffetto di inversioneper fare un passo avanti nel menu di navigazione.

Qui, utilizzeremo la stessa immagine di sprite (mySprite.png）per creare il menu di navigazione.

fondamenti HTML della navigazione

Inizieremo creando una navigazione con HTML lista non ordinataMenu di navigazione inizia.

<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>

Applicare CSS alla navigazione

Le seguenti sezioni illustreranno come utilizzare CSS per trasformare la semplice lista non ordinata fornita negli esempi in una navigazione basata su immagini maliziose.

Passo 1: ripristinare la struttura della lista

Di default, HTML lista non ordinataPer visualizzare come elenco, è necessario utilizzarelist-style-typeL'attributo è impostato su none per rimuovere il punto elenco predefinito.

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

Passo 2: impostare le proprietà comuni per ogni link

In questo passaggio, impostiamo tutti gli attributi CSS condivisi da tutti i link. Ad esempio:color,background-image,display,paddingecc.

ul.menu li a {
　　　　height: 50px;
　　　　line-height: 50px;
　　　　display: inline-block;
　　　　padding-left: 60px; /* Per separare il testo dall'immagine di sfondo */
　　　　color: #3E789F;
　　　　background: url("images/mySprite.png") no-repeat; /* Tutti i link condividono la stessa immagine di sfondo */
}

Passo 3: impostare lo stato predefinito di ogni link

Ora, dobbiamo definire una classe per ogni voce del menu, poiché ogni elemento all'interno dell'immagine sprite ha unabackground-positionAd esempio, l'icona Firefox si trova all'inizio dell'immagine sprite, quindi non è necessario spostare l'immagine di sfondo. Pertanto, in questo caso, la posizione verticale e orizzontale dello sfondo sarà 0. Allo stesso modo, è possibile definire la posizione di sfondo per altre icone all'interno dell'immagine sprite.

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;
}

Passaggio 4: Aggiungi lo stato di hover del link

L'aggiunta dello stato di hover è lo stesso principio dell'aggiunta dei link elencati sopra. Basta muovere il loro angolo in alto a sinistra al punto di partenza dell'immagine sprite (cioè, l'angolo in alto a sinistra), come fatto sopra. Puoibackground-positionCalcola semplicemente con la seguente formula:

La posizione verticale dello stato di hover = La posizione verticale dello stato normale - 50px

Poiché l'immagine di hover è esattamente sotto lo stato predefinito, l'altezza di ogni icona è uguale a 50px. Non è necessario un offset orizzontale per lo stato di hover dell'icona, perché non ci sono pixel prima dell'angolo in alto a sinistra dell'icona.

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;
}

Fatto! Dopo aver combinato l'intero processo, ecco il nostro codice HTML e CSS finale: