Implementierung von Bildsprites in CSS
Bildsprites werden in zahlreichen Webanwendungen verwendet, bei denen mehrere Bilder genutzt werden. Anstatt jedes Bild als separate Bilddatei einzufügen, ist es viel speicher- und bandbreitenfreundlicher, sie als einzelnes Bild zu senden; dabei wird die Hintergrundposition verwendet, um zwischen einzelnen Bildern in der gleichen Bilddatei zu unterscheiden, sodass die Anzahl der HTTP-Anfragen reduziert wird.
Hinweis: Bei der Nutzung von HTTP/2 kann es tatsächlich bandbreitenfreundlicher sein, mehrere kleine Anfragen zu stellen.
Implementierung
Angenommen, es wird jedem Element mit der Klasse tool-btn ein Bild zugewiesen:
.tool-btn {
background: url("myfile.png");
display: inline-block;
height: 20px;
width: 20px;
}
Eine Hintergrundposition kann entweder als zwei x-, y-Werte nach dem <url> im Hintergrund oder als background-position hinzugefügt werden. Zum Beispiel:
#btn1 {
background-position: -20px 0px;
}
#btn2 {
background-position: -40px 0px;
}
Dies würde den Startpunkt des Hintergrundbilds für das Element mit der ID btn1 20 Pixel nach links und für das Element mit der ID btn2 40 Pixel nach links verschieben (sofern ihnen die Klasse tool-btn zugewiesen ist und sie von der obigen Bildregel betroffen sind).
Ebenso können Sie Hover-Zustände erstellen, indem Sie #btn:hover anvisieren.