您当前的位置: 站长圈 > 技术文章 > 网页前端 > 切图技巧之怎么使用ps定位CSS Sprite图片

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

来源:站长圈 作者:adminroy 点击: 0

做网站的时候我们会用到CSS Sprite技术把很多背景图片整合起来做成一张图片,这样可以减少对服务器的请求数,减小文件的大小,加快网页访问的速度,那么写css的时候怎么定位每个小图片的位置坐标呢?其实很简单,比如我们有下面这张图片


 

现在我们的目标是要把中间的站长圈logo定位在我们的h1标签里,那怎么做呢?

第一步,把图片拖进ps里,在站长圈logo四周拉4条参考线,要想拉的精确,可以放大图片,用选框工具拉出你需要的长宽,这里就不赘述了。如图:



第二步,确定logo的宽和高。用ps的矩形选框工具沿着logo四周的参考线拉出选框,调出信息面板,就可以看见宽高的数值了,如图:


 

第三步,确定logo在整张图片里的坐标。还是用矩形选框工具,沿着图片左上角到logo左上角拉一个选框,要贴着参考线拉,信息面板显示的宽高就是logo左上角的坐标了,如图:


 

第四步,当然是新建一个html文件,创建一个h1标签,把我们获取的这4个数值分别放进相应的css代码里喽,代码如下:

css:
*{ padding:0; margin:0;}

.mylogo{ width:250px; height:84px; background:url(demo.png) no-repeat -68px -142px;}

.logo a{ display:block; width:250px; height:84px; text-indent:-9999px;}

html代码:

站长圈


好了,预览一下效果吧,这里为了看得清楚,给h1加了一个红色边框border:1px solid red;