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

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

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

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

我们拿到一个图：

HTML结构是：

<div></div>

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是否有了新的理解了呢，那还在等什么，快去行动呀，记得若是遇到了不懂问题能够到小猿圈寻找答案，里面有最新最全面的视频等着你去学习。