了解如何使用图像精灵

Question

我听说过这种方法，但我以前从未尝试过。

这只适用于悬停/鼠标悬停吗？

点击鼠标会有效吗？

https://jsfiddle.net/mntrmfsb/349/

所以，我会把这个图像放到图像精灵中，但是它是如何工作的？

 .playButtonb.active {
   border: 3px solid #e77d19;
   background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/yNVkI3W.png");
 }

或者我会使用这样的东西吗？

Answer 1

您需要正确指出要展示的项目的位置。

看这个例子