a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )Die eingestellte Höhe und Breite stellen sicher, dass nur ein Teil der sprite.png.webp-Grafik angezeigt wird. Der Rollover verschiebt die Position des Hintergrundbilds und zeigt einen anderen Bereich der Grafik an.
Siehe den Stift KBjZwg von Geoff Graham (@geoffgraham) auf CodePen.