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

Question

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

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

Answer 1

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

所以如果图标是 10px x 10px 并且你想要的是第 2 行的第 4 个，你可以这样做：

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