Question

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

修改

修正了引用代码中的一些偶然错误。

Answer 1

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

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

这有用吗？

将精灵居中作为div背景

修改

1 个答案: