缩小网页中的Sprite图像

Question

我有一个网页。这个网页引用了一个名为sprites.png的图像文件。该文件包含一个文件中的所有图像。在这个文件的一面，我有一个48像素×48像素的图像;我引用它在我的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> 

正如你可以想像，在“玩”精灵比实际空间较大。我真的很喜欢“播放”的图像是24像素×24像素在细胞背部居中。但是，我还没有弄清楚如何缩小我的精灵图像。

有没有办法做到这一点？

谢谢！

Answer 1

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

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