Png изображение и раскройка по классам

[P0jar]

Решал практикум на htmlbook. Вот это задание. Полез в ответы за подсмотром решения и наткнулся на одну очень интересную вещь. То решение я перенёс на codepan: 

http://codepen.io/pojar/pen/dMEbdZ 

Разметка, позиционирование расчётное, это понятно. Суть вопроса: там есть у каждой такой иконки два class: icon и класс соц. сети.

Вот цельная картинка иконок.

 

Вот этот png применяется в решении один раз прямо ко всем подобным элементом с классом icon как background. Далее происходит обращение по классам к конкретному значку. Но как это происходит? Ведь это цельное изображение. С псевдоклассом :hover ситуация идентичная. В коде нету никаких таких объявлений, однако к нужной иконке он работает.

Как это вообще происходит, объясните, пожалуйста. Png как и SVG хранит внутри какой-то код, где все иконки внутри уже разбиты на предопределённые классы и псевдоклассы? 

[kattiperk]

.icon - дает всем это изображение

.fb, .mail - дает позицию каждой иконки (:hover аналогично)

Например, ширина .icon = 30px*30px. Дополнительный класс .twitter сообщает, что твоя позиция иконки -

background-position: -30px -30px;

То есть по Х - отойди вправо на -30 пикселей, а по Y - вниз на -30 пикселей, а всё остальное скрыто, так как область 30*30 пкс. Для остальных классов .fb, .mail мы орудуем только значением background-position.

http://joxi.ru/brR8kNluQRN7p2 - что размыто, то скрывается.

Edited May 16, 2016 by kattiperk

[alex_web64]

Почитайте про css-спрайты

[Launder]

2 часа назад, P0jar сказал:

Неясно только одно: почему при icon 30x30 всё изображение не сжимается, а остаётся видна только конкретная иконка?

Манипуляция происходит не с изображением, а с контейнером, у которого изображение - фон.

[P0jar]

В 16.05.2016 в 13:30, kattiperk сказал:

То есть по Х - отойди вправо на -30 пикселей, а по Y - вниз на -30 пикселей, а всё остальное скрыто, так как область 30*30 пкс.

Спасибо, вроде, разобрался. Весьма хитроумный способ.

Неясно только одно: почему при icon 30x30 всё изображение не сжимается, а остаётся видна только конкретная иконка? Свойство таких png изображений? Ведь иконки  явно выглядят раскроенными в редакторе, только что слитные все. 

 

[Launder]

Этот фон и двигается, показывая из склеиной картинки нужный фрагмент.