Задача. Сделать иконку цветной, при наведении на неё курсора мыши.
Этот способ позволяет значительно ускорить процесс загрузки сраницы, т.к. все иконки будут находится в одном файле и следовательно запрос к серверу будет один.
Для начала сделаем прозрачный gif с размерами
исходного изображения и вставим его как обычную картинку:
<a id="lorem" href="#"><img src="blank16.gif" width="16" height="16" />Get an idea</a>
Дальше, нужно склеить оба (цветной и черно-белый) варианта картинки в один файл:
Естественно, высота изображения умножается на количество иконок. Было 16×16, стало 16×32.
Теперь CSS:
#lorem img { /* Вставляем склеенную картику на фон прозрачного gif`а. */
background:url(/images/material-images/articles/lamp.gif) no-repeat 0 0;
}
#lorem:hover img {
background-position:0 -16px; /* А вот и фокус, фон с иконками сдвигается вверх на 16 пикселей… */
}
#lorem:hover {
background:inherit /* Это решает проблему с некорректной перезагрузкой фоновых изображений в IE. */
}
Радуемся результату: 
Get an idea
© Андрей