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

如下图:

用CSS的背景定位就OK了。
比如 background:url(../images/ico.png) no-repeat -20px -100px;
如果ico.png就是你给的这张图的话,那么这个背景图片的显示位置就是从这张图的横坐标左移20px.纵坐标上移100px处开始。知道这个原理了我想你应该知道怎么弄了吧。
比如你的一个按钮要用到图中的某个按钮,你只要通过切图软件知道该按钮的宽和高,然后知道该按钮距离左边界有多远,距离上边距是多少。这样就能通过定位来实现了。。
温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2016-04-08
是sprite吧,这种方法用来处理背景图片比较好,可以省去不少请求数量。
用作背景:设置一个元素的高宽,通过background-position调整背景图的位置,使需要的部分露出来,其余地方被隐掉。
用作一般图片:与上面原理相同,只不过是设置该图片的pisotion将需要的部分显示出来,父元素overflow:hidden。由于需要多加无谓的标签,频繁使用定位,对性能和语义化都有比较大的影响,很少有人这么用。
当然,我这里说的也比较片面,你可以搜css sprite了解更多相关情况。本回答被提问者采纳
第2个回答  2013-10-18
一般称这种图为sprites。
css里把这张图设成background-image.然后用background-position就可以切了。
你上网搜css sprites教程,就会有很详细的介绍。
第3个回答  2013-10-18
TexturePacker

可以用这个软件打包
相似回答