精灵图标机制如何工作？

Question

我想了解如何通过指定名称从浏览器中的png文件加载特定图标。另外，我如何阅读特定png文件中的可用图标名称。

作为一个例子，在这个链接中， http://demos.telerik.com/kendo-ui/treeview/templates通过在spriteclass中指定一些名称来显示一些特定的图标，如何从文件中读取名称？我在谷歌搜索过，但没有得到关于此的详细信息。

从这个png文件中，只通过指定一个名称（如“pdf”，“image”等）来呈现特定图像，从哪里可以读取png文件中可用的名称？是否有任何工具或实用程序可以从png文件中读取可用的名称？

Answer 1

名称不在PNG中，它们位于样式表中（指定background-position以及用于裁剪图像的某些尺寸）。

Answer 2

Sprites与JavaScript / jQuery无关。它们基于CSS属性。

您有一个通用类，负责命令您的浏览器下载单个图像文件

#treeview .k-sprite {
    background-image: url('../content/web/treeview/coloricons-sprite.png');
}

然后您有一组其他CSS类与background-position一起使用以找到所需的图像

.folder {
    background-position: 0px -16px;
}

.pdf {
    background-position: 0px -32px;
}

图像文件充当矩阵，你只需要玩矩阵中每个图标的左上角。

Answer 3

好吧，当你的容器宽度小于图像的尺寸时。说20px乘20px。然后将精灵图像设置为背景图像：

style="background-image: no-repeat 0px 0px url(sprite.png)";

现在只有精灵中的第一个图像会显示，其他图像都会被隐藏。

如果要显示第二个，请将图像向上移动20px：

style="background-position: 0px -20px";

在CSS中，您可以将其设置为类：

.icon-folder,
.icon-pdf,
.icon-file {
    background-image: no-repeat 0px 0px url(sprite.png);
}

.icon-pdf {
    background-position: 0px -20px;
}

.icon-file {
    background-position: 0px -40px;
}