a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )Το καθορισμένο ύψος και πλάτος διασφαλίζει ότι εμφανίζεται μόνο ένα τμήμα του γραφικού sprite.png.webp. Η ανατροπή αλλάζει τη θέση της εικόνας φόντου, αποκαλύπτοντας μια διαφορετική περιοχή του γραφικού.
Δείτε το στυλό KBjZwg από τον Geoff Graham (@geoffgraham) στο CodePen.