a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )L'altezza e la larghezza impostate assicurano che venga mostrata solo una parte del grafico sprite.png.webp. Il rollover sposta la posizione dell'immagine di sfondo, rivelando un'area diversa dell'immagine.
Vedi la penna KBjZwg di Geoff Graham (@geoffgraham) su CodePen.