Grunnleggende lenkeoverføring som CSS Sprite - CSS-triks

Anonim
a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )

Den innstilte høyden og bredden sørger for at bare en del av sprite.png.webp-grafikken vises. Overrullingen skifter posisjonen til bakgrunnsbildet og avslører et annet område av grafikken.

Se pennen KBjZwg av Geoff Graham (@geoffgraham) på CodePen.