CSS Sprite从大图中截取小图完整教程

相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象：网页中很多图片素材被合成在一张图片上。

起初小菜模仿网站的时候，经常遇到这个现象，那时候也不知道这时什么技术，人家的整张图片素材不会利用，只能用ps切图，切成单个的再用。。。

其实，这是一个非常简单的技术，就是因为想象的太难了，才一直找不到问题的关键。

要想实现CSS抠图，只需要用到一个属性：background-position。

按照字面理解，这个属性就是背景定位，先看看google网站的素材图，如下：

假如小菜现在想做一个+1按钮，利用上边的素材图，普通状态显示A图，鼠标移上去显示后显示B图，实现这么一个动态效果。

按钮是用来实现功能的，一般是用超链接响应单击事件，但是不能把背景图直接加在超链接上，那样就不叫样式啦，因为超链接的文本长度变化时，样式也变了。

地球人一般的做法是，div里边套一个超链接，超链接负责实现功能，div负责装载背景图。html结构如下：

有了html骨架，接下来就要写css样式啦。

假如我们什么都不考虑，直接把整张图片设为背景，样式如下：

效果如图：

div是块级元素，默认是占一行的，这个先不用关心，但看到背景图重复了，这显然不是我们想要的，加上background-repeat:no-repeat;属性，改进样式如下：

这样就不重复了。

div可以理解成一个矩形框，它的左上角是顶点，背景图片的顶点也是左上角，div加载背景图时，会把两个顶点重合，顶点的坐标是(0,0)。不理解的看图，很简单的。。。

+1的小图片混杂在大图中，想提取出来，需要用background-position属性，这个属性相当于大图片不动，把div的顶点进行移动，移动到目标小图的顶点位置，如下图：