Как вы изменяете значение X положения фона нескольких элементов, но сохраняете их значение Y одинаковым?

Question

У меня есть 5 элементов, каждый из которых использует один и тот же спрайт значка фонового изображения. Их положение фона установлено по-разному, чтобы нацелить их значок на иконку спрайта.

например:

.icons{background-image: url('img/sprite.svg');}

.icon1{background-position: 10px 10px;}
.icon2{background-position: 10px 20px;}
.icon3{background-position: 10px 30px;}
.icon4{background-position: 10px 40px;}
.icon5{background-position: 10px 50px;}

Моя цель состоит в том, чтобы изменить значение X для положения фона каждого значка в медиа-запросе, но я не знаю, как изменить значение X для каждого значка БЕЗ необходимости изменять значение Y И иметь необходимость жестко кодировать каждое положение фона вручную в медиа-запрос для каждого элемента.icon.

Answer 1

Хотя это не является официальной собственностью, IE, Chrome и Safari все поддерживают background-position-x (а также y) так что если вы можете жить без поддержки FF (или Opera), вы можете использовать это.

Вы можете прочитать больше об этом здесь: http://snook.ca/archives/html_and_css/background-position-x-y