CSS - Измените изображение при наведении, вот так!

Question

Плз, посмотрите по этой ссылке: образец сайта

внизу вы видите значки WordPress и Joomla, когда вы наводите курсор мыши, кажется, что серые значки окрашиваются. Это всего лишь одна картинка (серия изображений - спасибо моей любви, Firebug!), И, если я прав, это метод позиционирования фона. Где я могу найти хороший ресурс, чтобы узнать это? Я уже могу сделать это путем кодирования в 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

Как упоминает Писквор, эту технику часто называют "CSS-спрайтами":

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.