用css实现只取图片中一个图标并不需要裁剪
在网站设计编辑中，我们会往往取网上找图片素材，但是呢，找到的图片素材都在一张图片上，就比如说图标，图片如下：
图标合集
如果让你只取其中一个图标，你是否在想用软件分割呢，其实并不用，css就可以实现只取其中之一并且不需要裁剪，步骤如下：
第一步：量出图标大小以及图标左上角位置
这里我们取第一行第二个图标显示，图标大小37X38，左上角位置为：82X22
第二步：设置显示div的大小为图标大小
<html>
<body>
<style> .show{ width:37px; height:38px; } </style>
<div ></div>
</body>
</html>
第三步：设置div的背景图片为图标素材，并且显示图片素材中第二个图标的位置
<html>
<body>
<style>
.show{ background:transparent url(/images/2.png) no-repeat scroll -82px -22px ; width:37px; height:38px; }
</style>
<div ></div>
</body>
</html>
显示如下：
是不是很神奇，其实主要靠的是其中
background:transparent url(/images/2.png) no-repeat scroll -82px -22px ;
其中
background:transparent表示div背景透明，然后
url(/images/2.png)表示设置div的背景为图标素材图片
no-repeat 表示图片不重复
scroll -82px -22px 表示背景图片左边移动82个像素，向上移动22个像素，也就是说从x：82px y:22px开始显示图片
然而div只有一个图标的大小，所以显示出来的就只有一个图标大小，其余部分均为不可见。
如此就实现了CSS让图片只显示一部分，也就相当于抠图的功能。