CSS 背景图像精灵调整大小

Question

我有以下 CSS 代码用于在音频元素上显示控制按钮：

background: url("../img/controlSprite.svg") 0 0;
    height: 53px;
    width: 53px;
    float: left;
    margin-right: 10%;

因为按钮是可点击的并且在点击时改变我使用了精灵模式所以当一个新图像应该显示时我只是 position 下一个图像的背景。 图像看起来像这样：

问题是，当我尝试通过更改宽度或高度来使这些按钮适应较小的屏幕时，调整大小会发生在整个图像上，而不仅仅是我希望调整大小的一个元素。

使用此背景定位时是否有任何方法可以“锁定”显示的元素，以便当我想让元素变大或变小时它只适用于元素而不是整个精灵图像？

Answer 1

当 hover 结束或单击按钮时，我更改了 transform 的 translateY 属性。

这可能会解决您的问题。

 var button = document.getElementsByClassName('button')[0]; var sprite = document.getElementsByClassName('sprite_image')[0]; var count = 0; button.onclick = function() { if (count % 2 == 0) { sprite.style.transform = "translateY(-136px)"; } else { sprite.style.transform = "translateY(-1px)"; } count++; };

 * { margin: 0px; padding: 0px; }.sprite { width: 55px; height: 63px; overflow: hidden; }.sprite img {} @keyframes move { 0% { transform: translateY(-0px); } 50% { transform: translateY(-63px); } 100% { transform: translateY(-126px); } }.sprite button { border: none; outline: none; background-color: white; cursor: pointer; }.sprite button:hover.sprite_image { transform: translateY(-68px); }

 <div class="sprite"> <button class="button"><img src="https://i.stack.imgur.com/5GrWU.png" class="sprite_image"></button> </div>