如何通过Javascript动态剪切图片

Question

我有这样的图标的图片，我知道这张图片可以帮助节省http链接的时间。但是，我不知道如何使用它。

1. 我想我需要通过坐标获得小图标。有没有图书馆可以做到这一点？ JQuery的？道场？
2. 我怎样才能得到这张照片？我只知道我可以使用CSS或使用CSS显示图片，但我认为我需要通过其他方式获取此图片。 Javascript库是否也可以完成这项工作？

Answer 1

实际使用非常简单。让按钮有ui_element类。每个按钮都有ui_element类和button_***类 看看：

.ui_element {
    background-image: url("http://i.stack.imgur.com/S02fG.png");
    width: 24 px;    /*May be different for specific buttons*/
    height: 24 px; 

}
.button_home {
    background-position: -23px -23px; /*Move the main image to the deserved element*/

}

然后，理论上，以下代码应显示红色的“home”图标：

<div class="ui_element button_home"></div>

你也可以做一些花哨的技巧，在悬停时显示不同的显示：

div.button_home {
    background-position: 0px -23px; /*grey icon*/
}
div.button_home:hover {
    background-position: -23px -23px; /*red icon*/
}

请注意，我的代码不会显示正确对齐的所有内容。除非在生成图像时使用了精确的模式，否则无法自动生成CSS代码。

Answer 2

无法“动态”执行此操作，这意味着无法找出坐标。要在 CSS 中手动实现您所需的内容，您可以使用

background:url('sprites.png') 0 0;

格式是图像本身，距离多远，以及向下多远。