1.背景介绍
在网页设计中，经常需要从图片中获取小图标，用于页面的布局或者作为按钮等交互元素，在这其中，我们需要用到CSS中的Sprite技术。Sprite技术由布景动画中叫做雪碧图，它是将多个小的背景图标合并到一张大图中，并通过CSS类等技术来控制图标的样式和位置。
2.制作小图标雪碧图
2.1 准备素材
首先，我们需要准备好我们网站需要的小图标，将它们裁剪成大小一致的图片，最好是正方形，并用PNG或者GIF格式保存，保持透明背景。
下面提供一些网站，在这些网站上可以免费下载各种图标并用于商业:iconfont,easyicon,iconfinder,fontawesome。
2.2 合成雪碧图
将各个小图标整合到一张大图中，使用图像编辑软件比如Photoshop进行处理。首先将各个小图标按需要的顺序排列，然后将它们放在一张大图中，这样做的好处是可以减少网站http请求的次数，提高访问速度。
下面是一个例子:
.sprite{
background-image: url("icons.png");
background-size: 400px 400px;
}
.icon1{
width: 30px;
height: 30px;
background-position: 0 0;
}
.icon2{
width: 30px;
height: 30px;
background-position: -30px 0;
}
其中，.sprite是合成后的雪碧图，在CSS class中可以通过background-position来指定每个小图标的位置。
2.3 使用雪碧图
使用雪碧图需要注意的是，在CSS中，每一个class都对应一个小图标：
.icon1{
width: 30px;
height: 30px;
background-position: 0 0;
}
.icon2{
width: 30px;
height: 30px;
background-position: -30px 0;
}
然后，我们将class应用到HTML中需要的元素上，形成效果:
<span class="icon1"></span>
<span class="icon2"></span>
3. SPRITE技术的优缺点
3.1 优点
使用SPRITE技术可以显著减小HTTP请求，提高页面的加载速度。
图标的轻量化可以减小页面的大小，使得页面更加快速和高效。
同时，使用雪碧图可以提高网站的SEO排名。搜索引擎通常会将页面的加载速度作为排名标准之一，而使用雪碧图可以显著提高加载速度。
3.2 缺点
使用雪碧图需要提前制作好，并且对页面布局造成一定的限制。
使用雪碧图增加了制作过程中的复杂度，需要时间和技术的支持。
4. 总结
Sprite技术在网站设计中应用越来越广泛，利用它有助于提高网站的质量和效率，减少HTTP请求次数。
用CSS从PNG里截取小图标需要按照一定的规则设计和制作雪碧图，然后使用CSS类将它们运用到网页中。
最后提供一些制作雪碧图的网站，方便大家选择或者参考：subtlepatterns,icomoon,spritecow。