如何从png文件中提取特定图标？

Question

我正在构建一个php网站，并在一个png文件中有一组图标。

但是，我不知道如何从这个大文件中提取特定图标，因为它们都被合并到一个图像中。谁能告诉我该怎么办？

Answer 1

通常的技巧是将图像设置为元素的背景，将元素的宽度和高度设置为等于图标的宽度和高度，并使用background-position将所需图标放置在“视图中”

因此，如果图标是10px乘10px而你想要的那个是第2行的第4行，你可以这样做：

.myIcon {
  background-image: url(myImage);
  width:10px;
  height:10px;
  background-position: -30px -10px;
}