CSS背景图片精灵调整大小

Question

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

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

由于按钮是可单击的，并且单击后更改，因此我使用了精灵模式，因此当应显示新图像时，我只需将背景放置到下一张图像即可。图片如下：

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

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

Answer 1

当鼠标悬停或单击按钮时，我更改了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>