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

Question

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

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

Answer 1

通常的技术是将图像设置为元素的背景,将元素的宽度和高度设置为等于图标的宽度和高度,并用于background-position将所需图标放置在"视图中".

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

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