Центрирование спрайта в качестве фона div - PullRequest
Новая
       42

Центрирование спрайта в качестве фона div

0 голосов
/ 30 апреля 2018

У меня есть кнопка, состоящая из спрайта, установленного в качестве фонового изображения div. Лист спрайта расположен горизонтально. Обратите внимание, что исходное изображение также уменьшается, чтобы соответствовать div. 

.button {
    background: url(sprite.png);
    background-size: auto 100%;
    width: 100px;
    height: 100px;
    background-position: 0px 50%;
}

.play {
    background-position: 0px;
}

.pause {
    background-position: -100px;
}

Я бы хотел, чтобы при нажатии кнопка немного уменьшалась, например: 

.button:active {
    background-size: auto 95%;
}

Однако, это заставляет кнопку сжиматься к левому краю. Как можно отцентрировать изображение, учитывая смещение позиции для спрайта?

В идеале решение должно быть независимым от размера, чтобы тот же стиль работал, если размеры div были изменены или установлены динамически. Тем не менее, я даже изо всех сил пытаюсь получить желаемый эффект только с помощью ручного решения, такого как: 

.play:active {
    background-position: 3px 50%;
}

.pause:active {
    background-position: -97px 50%;
}

Редактировать

Исправлены некоторые случайные ошибки в указанном коде.

1 Ответ

0 голосов
/ 30 апреля 2018 
.button {
    background: url("sprite.png");
    background-position: center;
    background-size: auto 100%;
    width: 100px;
    height: 100px;
}

.button:active {
    background-size: auto 95%;
}

Это работает?

...