Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.
Implementierung
Angenommen, jedem Element mit der Klasse toolbtn wird ein Bild zugewiesen:
.toolbtn {
background: url(myfile.png);
display: inline-block;
height: 20px;
width: 20px;
}
Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der url() dem Hintergrund hinzugefügt werden oder als background-position. For example:
#btn1 {
background-position: -20px 0px;
}
#btn2 {
background-position: -40px 0px;
}
Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse toolbtn zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).
Ebenso können Hover-Status erstellt werden mit:
#btn:hover {
background-position: <nach rechts verschobene Pixel>px <nach unten verschobene Pixel>px;
}