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>