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

I'm building a php website and have a set of icons in one png file.

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

However, I have no idea how to extract a specific icon from this big file since they are all merged into one image. Can anyone tell me what to do?

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

1 个解决方案

#1

The usual technique is to set the image as background for an element, set the width and height of the element equal to the width and height of the icon and use background-position to place the desired icon "in view".

通常的技术是将图像设置为元素的背景,将元素的宽度和高度设置为等于图标的宽度和高度,并使用背景位置将所需图标放置在“视图中”。

So if the icons are 10px by 10px and the one you want is the 4th on the 2nd row, you can do this:

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

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