Возможно ли в CSS применить в качестве фона не всю картинку, а только ее определенную часть?

Question

[sorry_i_noob]

Здравствуйте. У меня есть кнопка размером 40 на 40 пикселей.
Если навести на кнопку, то у нее будет в качестве фона одна картинка. Если не наводить, то другая.
Я совместил две картинки в фотошопе. Теперь я хочу поместить эту картинку на кнопку. Но не полностью - а лишь ее часть. И в зависимости от того, есть ли hover, менять часть картинки.

https://jsfiddle.net/c42ez3ku/

Как мне поместить только часть? Я попробовал background-size, но это свойство вместо обрезания картинки жмет ее. Можно как-нибудь обрезать?

Comments

[Даниил Маслов]

https://learn.javascript.ru/css-sprite

[sorry_i_noob]

s0xzwasd, там приведены примеры, на которых размер кнопки должен быть таким же, как размер конкретной картинки во всем изображении. Мне это не подходит, так как кнопка у меня больше. Да и в целом это не очень классный вариант, так как при адаптиве размер кнопки может меняться.

[Rustam Bainazarov]

Нет, так нельзя. Можно только ограничить размеры самого блока, а нужный кусок двигать через background-position (принцип работы спрайта). Либо делайте новую картинку. Но никак иначе.

Answer 1

[Otrivin]

Используй псевдоэлементы before или after, задавай размер ему и ставь это изображение фоном.

Answer 2

[Чипекве]

https://jsfiddle.net/uLk7pnab/