javascript - Sprite 图标机制如何工作？

Question

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

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

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

Answer 1

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;
}

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