CSS Sprites(基本写法，如何使用)

说白就是用样式表切一个大图片

现在很多好的网站都是这么写，然后很多位置的图片，就用一张图片，然后一次URL请求就行了，加快网站访问速度

这个就是切片工具可以直接导出下图框框中的内容

这个是切片工具 全部拆分切开 用CSS精灵的方式合并到一起就ok了

这里就是CSS精灵的写法 全用的一张图片 默认是 图片的位置是你div的左上角开始，我们用background-position，给他向左，向上移动一下 ，显示效果就变了，将会显示不同位置的图片，有些地方需要做平铺，所以我是横着切图的，最终文件就是那个res.png。

那么如何判断位置到底是多少？

用PS的切片工具，可以直接看到位置和宽高

 

————————————————————————————————————

原文地址 ： 点击打开链接