CSS Sprite

切图技巧之怎么使用ps定位CSS Sprite图片

 

作网站的时候咱们会用到CSS Sprite技术把不少背景图片整合起来作成一张图片，这样能够减小对服务器的请求数，减少文件的大小，加快网页访问的速度，那么写css的时候怎么定位每一个小图片的位置坐标呢？

作网站的时候咱们会用到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;