Image sprite CSS

Immagine spettro

L'immagine spettro è una raccolta di immagini contenuta in un'unica immagine.

Una pagina che contiene molte immagini potrebbe caricarsi molto lentamente e generare molte richieste del server.

L'uso dell'immagine spettro riduce il numero di richieste del server e risparmia banda.

Immagine spettro - Esempio semplice

Utilizziamo un'unica immagine ("navsprites.gif") invece di tre immagini separate:

Immagine di navigazione

Utilizzando il CSS, possiamo visualizzare solo una parte dell'immagine necessaria.

Nell'esempio seguente, il CSS specifica quale parte dell'immagine "navsprites.gif" deve essere visualizzata:

Esempio

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Prova tu stesso

Spiegazione degli esempi:

  • <img id="home" src="trans.gif"> - Definire solo un'immagine trasparente piccola, perché l'attributo src non può essere vuoto. L'immagine effettivamente visualizzata sarà l'immagine di sfondo specificata nel CSS.
  • width: 46px; height: 44px; - Definire la parte dell'immagine che utilizzeremo
  • background: url(navsprites.gif) 0 0; - Definire l'immagine di sfondo e la sua posizione (left 0px, top 0px)

Immagine spettro - Creazione di un elenco di navigazione

Vogliamo utilizzare l'immagine spettro ("navsprites.gif") per creare un elenco di navigazione.

Utilizzeremo l'elenco HTML perché può essere un collegamento e supporta anche le immagini di sfondo:

Esempio

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Prova tu stesso

Spiegazione degli esempi:

  • #navlist {position:relative;} - Impostazione della posizione in relativa per consentire la posizionamento assoluto all'interno
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Margine e padding impostati a 0, rimuovere list-style e tutti gli elementi della lista sono posizionati in modo assoluto
  • #navlist li, #navlist a {height:44px;display:block;} - Tutte le altezze delle immagini sono 44px

Ora iniziamo a impostare la posizione e lo stile per ogni sezione specifica:

  • #home {left:0px;width:46px;} - Posizionamento sempre a sinistra, larghezza dell'immagine 46px
  • #home {background:url(navsprites.gif) 0 0;} - Definire l'immagine di sfondo e la sua posizione (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Posizionamento a destra 63px (#home larghezza 46px + spazio extra tra elementi), larghezza 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Definire l'immagine di sfondo verso destra 47px (#home larghezza 46px + 1px di spaziatura)
  • #next {left:129px;width:43px;} - Posizionamento a destra 129px (#prev inizio è 63px + larghezza del #prev è 43px + spazio in eccesso), larghezza 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Definire l'immagine di sfondo verso destra 91px (#home larghezza 46px + 1px di spaziatura + #prev larghezza 43px + 1px di spaziatura)

Image sprite - Effetto hover

Ora, dobbiamo aggiungere l'effetto di hover alla lista di navigazione.

Suggerimento::hover selettore è disponibile per tutti gli elementi, non solo per i link.

La nostra nuova immagine ("navsprites_hover.gif") contiene tre immagini di navigazione e tre immagini per l'effetto di hover:

Immagine di navigazione

Poiché questo è un'immagine, non sei sei file singoli, quindi quando l'utente posiziona il mouse sull'immagine,Non ci sarà ritardo di caricamento.

Aggiungiamo solo tre righe di codice per ottenere l'effetto di hover:

Esempio

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Prova tu stesso

Spiegazione degli esempi:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Abbiamo assegnato la stessa posizione di sfondo per tutte e tre le immagini di hover, solo 45 pixel in basso