使图像悬停的方法

Question

我有这个图像，我希望默认情况下为白色，悬停时为青色。还有另一种方法，而不是制作2张图像，一张白色和一张青色？

Answer 1

您可以制作放大镜透明的PNG，然后在CSS中的img标签上设置背景颜色：

img {
  background: steelblue;
}

img:hover {
  background: skyblue;
}

演示：http://jsbin.com/jeqihuxo/2/edit

Answer 2

另一种方法是使用精灵。好吧，技术上不会是两个单独的图像，而是一个background-position在悬停时被更改的图像。你的图像是36x48，所以在左侧使用非悬停版本制作新图像72x48，在右侧创建悬停版本并在悬停时移动背景。