关于如何使用CSS（背景位置应用程序）从大图像中提取小图像的完整教程！

有了html骨架，下一步就是写css样式啦。如果什么都不考虑，直接把整张图片设置为背景，样式如下：1.btn{2background:url(bg.png);3}效果如图：div是一个块级元素，默认占一行，先不管这个，但是看到背景图重复了，这显然不是我们想要的，加上background-repeat:no-repeat;属性，改进后的样式如下：1.btn{2background:url(bg.png);3background-repeat:no-repeat;4}这个就不重复了。div可以理解为一个矩形框，它的左上角是顶点，背景图片的顶点也是左上角。div加载背景图片时，两个顶点会重叠，顶点的坐标为(0,0)。看不懂就看图，很简单。..+1小图混在大图中。如果要提取它，则需要使用background-position属性。这个属性相当于大图不动。将div的顶点移动到目标小图的顶点位置，如下图：图片的一部分，我该怎么办？设置div的宽高和小图的宽高一样！！我们再来看一下background-position属性。它有两个参数，即水平方向移动的像素点和垂直方向移动的像素点，都用负数表示。大图不动，div动，也只能向右下移动。请记住，在这两个方向上移动的像素由负数表示！因此，只需要求出小图相对于大图左上角的水平移动像素和垂直移动像素即可。小盘子不需要任何专业工具。使用屏幕截图非常方便。从大图的左上角开始切割，到小图的顶部停止。可以看到像素都差不多了，再调试调试。基本上，它完成了。本例中小图A的位移为：-25px-374px，小图A的尺寸为：24px16px。所以css样式如下：1.btn{2background:url(bg.png);3background-repeat:no-repeat;4background-position:-25px-374px;5height:16px;6width:24px;7}效果如下：这样，小图就被裁剪出来了！简单的！！先说明一个问题，图片上有+1，我在超链接上写了+1。这是因为很多时候文字内容并没有写在图片上，所以灵活性太差了，文字就是文字，配菜是给大家一个完整的demo，所以再写一个+1，和接下来处理它！先center+1，居中分为水平居中和垂直居中，水平居中超链接，需要设置text-align:center；在div上，此属性用于子节点；div中的垂直居中超链接，只需将a标签的line-height属性设置为与div的高度相同即可。样式如下：1.btn{2background:url(bg.png);3背景重复：不重复；4背景位置：-25px-374px；5高度：16px；6宽度：24px；7文本对齐：居中；8}9.btna{10line-height:16px;11}效果如下：接下来还有一个问题，我们可以发现只有当鼠标移到+1文字上时，鼠标才会变成手形状来响应事件。这显然不是我们想要的。应该是当鼠标移入图片时，准确的说，当鼠标移入div时，可以变成手形，响应事件。这个也简单，就是加上display:block;属性到a标签（超链接）。另外这个下划线比较醒目，使用text-decoration:none;属性去掉，很常见，就不多说了。样式如下：1.btn{2background:url(bg.png);3背景重复：不重复；4背景位置：-25px-374px；5高度：16px；6宽度：24px；7文本对齐：居中；8}9.btna{10line-height:16px;11display:block;12text-decoration:none;13}最后剩下的就是当鼠标移入时切换背景。在这个例子中，a标签设置在div内部，当鼠标移入时改变背景。当然是指鼠标移入div，改变背景也改变了div的背景，而不是a标签！！所以要在div标签上调用hover，div的样式是btn，所以写成.btn:hover{}。换背景需要找到背景图片，需要裁掉小图，也就是上面指出的B图。刚才显示的是小图A，小图B和小图A在同一水平线上，所以垂直方向的移动像素相同，水平方向的差值是小图A的水平像素加上小图A的宽度，经过测试，小图B的位移为：-50px-374px，大小不用管，一定要和小图A一样，不一样就可以'没完没了。只需放置位置background-position:-50px-374px;.btn:hover{}中的B小图像。样式如下：1.btn{2background:url(bg.png);3背景重复：不重复；4背景位置：-25px-374px；5高度：16px；6宽度：24px；7文本对齐：居中；8}9.btna{10line-height:16px;11display:block;12text-decoration:none;13}14.btn:hover{15background-position:-50px-374px;16}最终效果-之前鼠标移入：最终效果——鼠标移入后：好了，教程到此结束，小菜只是简单演示了一个完整的制作过程，中间还有很多细节，比如浏览器兼容性，CSS优化等等，这就需要读者自己去摸索了。其实小菜一直在说CSS抠图。真正的技术叫做CSSSprite技术，国人习惯称它为CSSsprites。这种技术既有优点也有缺点。好处是由于图片是放在一起的，所以请求的时候只请求一张图片，减少了与服务端的交互次数，也可以解决hover延迟加载的问题。缺点是难以控制，扩展性不是很好。以后要是有改动，可以说是牵一发而动全身，有时候会因为屏幕分辨率的不同导致背景崩溃。小菜水平有限，文章不足，望大神见谅！在学习web前端的过程中，难免会遇到很多问题。这些问题可能会困扰你很长时间。为此，我有一个web开发学习交流群（545667817），里面全是掘金的小伙伴，整理了一份最全的前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5项目实战学习资料。任何想学习的人都可以申请加入。大家互相学习，互相交流，共同进步。每天分享不一样的学习资料！