缩小网页中的精灵图像

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>

可以想象，“游戏”精灵比实际空间大。我真的很喜欢“播放”图像是在单元格背后居中的24px x 24px。但是，我还没弄清楚如何缩小我的精灵图像。

有办法吗？

谢谢！

Answer 1

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

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