我有一个网页。该网页引用了一个名为 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 图像。
有办法吗?
谢谢!
最佳答案
你必须给它添加background-size
。这样您就可以缩放显示的图像。
.play {
width: 48px;
height: 48px;
background-image: url('/img/sprites.png');
background-position: -437px 234px;
background-size: 24px 24px;
}
关于html - 缩小网页中的 Sprite 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40573969/