Question

CSS切图问题,所有背景图标都集合在一张图上,这图是怎么切出来的?求大神指点.

如下图:

Answer 1

用CSS的背景定位就OK了。
比如 background:url(../images/ico.png) no-repeat -20px -100px;
如果ico.png就是你给的这张图的话，那么这个背景图片的显示位置就是从这张图的横坐标左移20px.纵坐标上移100px处开始。知道这个原理了我想你应该知道怎么弄了吧。
比如你的一个按钮要用到图中的某个按钮，你只要通过切图软件知道该按钮的宽和高，然后知道该按钮距离左边界有多远，距离上边距是多少。这样就能通过定位来实现了。。

Answer 2

是sprite吧，这种方法用来处理背景图片比较好，可以省去不少请求数量。
用作背景：设置一个元素的高宽，通过background-position调整背景图的位置，使需要的部分露出来，其余地方被隐掉。
用作一般图片：与上面原理相同，只不过是设置该图片的pisotion将需要的部分显示出来，父元素overflow:hidden。由于需要多加无谓的标签，频繁使用定位，对性能和语义化都有比较大的影响，很少有人这么用。
当然，我这里说的也比较片面，你可以搜css sprite了解更多相关情况。

Answer 3

一般称这种图为sprites。
css里把这张图设成background-image.然后用background-position就可以切了。
你上网搜css sprites教程，就会有很详细的介绍。

Answer 4

TexturePacker

可以用这个软件打包