小猿圈web前端解析CSS怎么从图片中抠出一部分（雪碧图）

对于学习前端的小伙伴来说css是不是一点都不陌生呢，从开始学习前端就接触的css你真的熟练了吗？今天小猿圈web前端讲师讲解怎么从CSS图片中抠出一部分（雪碧图）。

这里咱们会用到一个css属性：background-position。

按照字面理解，这个属性就是背景定位，下面咱们来具体操作一下：

咱们拿到一个图：

HTML结构是：

CSS代码是：

div{

background: url('bg.png') no-repeat;

}

比如咱们现在想要哪个手机，通过ps测量到哪个手机到尺寸是，宽度（10px）、高度（16px），那么咱们调整一下css：

div{

background: url('bg.png') no-repeat;

width:10px;

height: 16px;

}

运行结果：

手机这个小图混杂在大图中，想提取出来，需要用background-position属性，background-position它有两个参数，分别是水平方向移动的像素、竖直方向移动的像素，都用负数表示。

因此，只要找到小图相对于大图左上角顶点的水平移动像素、竖直移动像素就可以了。

经过测量以后的css调整为：

div{

background: url('bg.png') no-repeat;

width:10px;

height: 16px;

background-position: -299px -243px;

}

以上就是小猿圈web前端老师针对雪碧图的简单介绍，对于你熟悉的css是否有了新的理解了呢，那还在等什么，快去行动呀，记得如果遇到了不懂问题可以到小猿圈寻找答案，里面有最新最全面的视频等着你去学习。

转载于:https://juejin.im/post/5cd2954f51882535b07e5e17