时间戳

首页 > 解决方案 > CSS 背景图片精灵调整大小

css - CSS 背景图片精灵调整大小

问题描述

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

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

由于按钮是可点击的并且点击时会发生变化，我使用了精灵图案，所以当应该显示新图像时，我只需将背景定位到下一张图像。图像如下所示：

在此处输入图像描述

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

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

标签： cssimage

解决方案

当它悬停或单击按钮时，我更改了转换的 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>

推荐阅读