CSS - 通过悬停更改图像，就像这样！

Question

Plz看看这个链接： a sample site

在底部你看到wordpress和joomla图标，当你用鼠标悬停它时，似乎灰色图标变色。 这只是一张图片（一系列图片 - 对我的爱，萤火虫！），如果我是对的，那就是背景定位的方法。 我在哪里可以找到一个很好的资源来学习它？ 我已经可以通过CSS编码来做到这一点（但有两个图像，一个用于“a”，一个用于“a：hover”标签）。 感谢

Answer 1

它被称为精灵：

Google也使用了一个，因为它减少了所提供内容的大小：

为了使其正常工作，您剪切背景图像，以便只显示一小部分：

#foo
{
  background-image: url('bar.png');
  background-position: 0px 0px;
}

在:hover上，你将它转移了一下：

#foo:hover
{
  background-position: 70px 0px;
}

Answer 2

正如piskvor所提到的，这种技术通常被称为“CSS sprites”：

div {
    background-image:<url-to-image>;
    background-position:0px 0px;
}

div:hover {
    background-image:<url-to-image>;
    background-position:0px 50px;
}

诀窍是让图像中包含两种状态。然后使div足够大，仅适用于其中一个状态。在:hover上，您可以通过更改background-position值来更改图片的哪个部分。