CSS
CSS Image Sprites

Sintassi

• // Utilizzo di background-position
  background: url ("sprite-image.png");
  posizione di sfondo: -20px 50px;
• // Stenografia della proprietà sullo sfondo
  background: url ("sprite-image.png") -20px 50px;

Osservazioni

Un'implementazione di base

Cos'è uno sprite di immagini?

Un immagine sprite è una singola risorsa situata all'interno di un foglio di immagine sprite. Un foglio immagine sprite è un file immagine che contiene più di un asset che può essere estratto da esso.

Per esempio:

L'immagine sopra è un foglio di immagine sprite, e ognuna di quelle stelle è uno sprite all'interno del foglio sprite. Questi fogli sprite sono utili perché migliorano le prestazioni riducendo il numero di richieste HTTP che un browser potrebbe dover effettuare.

Quindi come si implementa uno? Ecco alcuni esempi di codice.

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

Usando l'impostazione della larghezza e dell'altezza dello sprite e usando la proprietà background-position in CSS (con un valore xey) è possibile estrarre facilmente gli sprite da un foglio sprite usando CSS.