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

html-css026

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

用CSS的背景定位就OK了。

比如 background:url(../images/ico.png) no-repeat -20px -100px

如果ico.png就是你给的这张图的话,那么这个背景图片的显示位置就是从这张图的横坐标左移20px.纵坐标上移100px处开始。知道这个原理了我想你应该知道怎么弄了吧。

比如你的一个按钮要用到图中的某个按钮,你只要通过切图软件知道该按钮的宽和高,然后知道该按钮距离左边界有多远,距离上边距是多少。这样就能通过定位来实现了。。

CSS Sprite

需要知道大图的网地,小图标在图上的位置偏移(写进css里的background-position要加负号),和大小。

<style>

.icon {

  background:url(background.png)

  background-repeat:no-repeat

  background-position:-25px -374px

  height:16px

  width:24px

}

</style>

<div class=".icon"></div>