切图技巧之怎么使用ps定位CSS Sprite图片
做网站的时候我们会用到CSS Sprite技术把很多背景图片整合起来做成一张图片，这样可以减少对服务器的请求数，减小文件的大小，加快网页访问的速度，那么写css的时候怎么定位每个小图片的位置坐标呢？其实很简单，比如我们有下面这张图片
现在我们的目标是要把中间的站长圈logo定位在我们的h1标签里，那怎么做呢？
第一步，把图片拖进ps里，在站长圈logo四周拉4条参考线，要想拉的精确，可以放大图片，用选框工具拉出你需要的长宽，这里就不赘述了。如图：
第二步，确定logo的宽和高。用ps的矩形选框工具沿着logo四周的参考线拉出选框，调出信息面板，就可以看见宽高的数值了，如图：
第三步，确定logo在整张图片里的坐标。还是用矩形选框工具，沿着图片左上角到logo左上角拉一个选框，要贴着参考线拉，信息面板显示的宽高就是logo左上角的坐标了，如图：
第四步，当然是新建一个html文件，创建一个h1标签，把我们获取的这4个数值分别放进相应的css代码里喽，代码如下：
css：1 |
*{ padding:0; margin:0;} |
2 |
3 |
.mylogo{ width:250px; height:84px; background:url(demo.png) no-repeat -68px-142px;} |
4 |
5 |
.logo a{ display:block; width:250px; height:84px; text-indent:-9999px;} |
html代码：
1 |
站长圈
好了，预览一下效果吧，这里为了看得清楚，给h1加了一个红色边框border:1px solid red;
