如何通过使用Javascript

enter image description here 如何通过使用Javascript

动态剪切图像我有这样的图标的照片，我知道这幅画可以帮助节省时间HTTP链接。但是，我不知道如何使用它。

我想我需要通过坐标来获取小图标。有没有图书馆可以做到这一点？ JQuery的？道场？
我怎样才能得到这张照片？我只知道我可以使用CSS或CSS来展示图片，但我认为我需要以另一种方式获得这张图片。 Javascript库可以做这个工作吗？

来源

2013-04-14 Bryce

Sprites应该与CSS'background-image'和'background-position'属性一起使用。 – BenM

http://css-tricks.com/css-sprites/是我在Google上发现的第一个教程。 – nnnnnn

除非您在canvas或webgl上下文中使用图像，否则应该使用css属性。 – Chad

实际使用非常简单。让我们有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*/ 

}

然后，从理论上讲，下面的代码应该显示红色的 “家” 图标：

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

你也可以做一些花哨的技巧，悬停likedifferent显示：

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

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

来源

2013-04-14 12:37:48

没有办法做到这一点“动态”，这意味着它将无法找出坐标。实现手动你在CSS找什么你会用

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

格式是图像本身，如何最左边，并有多远了。

来源

2013-04-14 12:38:11

如何通过使用Javascript

回答

相关问题