Css 将精灵居中作为div背景

我有一个按钮，由一个精灵组成，作为一个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%;
}

编辑 修复了引用代码中的一些偶然错误

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

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

---

这样行吗

呃，不。。。我不确定你提出的解决方案是什么<代码>后台位置：类在类<代码>中被重写。播放< /代码>和代码>暂停> <代码>。如果我不希望按钮成为我的StrueSeTeT中的区域…谢谢指出<>代码> Src 应该是代码> URL< /Cord>。在这里重新键入代码时，这是一个错误。