Liên kết cơ bản Rollover as CSS Sprite - Thủ thuật CSS

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

Chiều cao và chiều rộng đã đặt đảm bảo chỉ một phần của đồ họa sprite.png.webp được hiển thị. Cuộn qua thay đổi vị trí của hình nền, để lộ một vùng khác của đồ họa.

Xem Pen KBjZwg của Geoff Graham (@geoffgraham) trên CodePen.