html - 缩小网页中的 Sprite 图像

Question

我有一个网页。该网页引用了一个名为 sprites.png 的图像文件。该文件在一个文件中包含所有图像。在这个文件的一侧，我有一张 48px x 48px 的图像；我在我的 CSS 中引用它是这样的:

.cell-back {
  height:36px;
  width:36px;
  border-radius:18px;
  background-color:green;
}

.play {
    width:48px;
    height:48px;
    background: url('/img/sprites.png') -437px 234px;
}

在我的网页中，我有:

<div class="cell-back">
  <div class="play"></div>
</div>

正如您所想象的，“play” Sprite 比实际空间要大。我真的很希望“播放”图像以 24px x 24px 为中心位于单元格背面。但是，我还不知道如何缩小我的 Sprite 图像。

有办法吗？

谢谢!

Answer 1

你必须给它添加background-size。这样您就可以缩放显示的图像。

.play {
  width: 48px;
  height: 48px;
  background-image: url('/img/sprites.png');
  background-position: -437px 234px;
  background-size: 24px 24px;
}