在网站开发我们常会用CSS精灵图技术，那么什么CSS精灵图呢？简单来说就是把多张图片和成一张图片来减少网页http请求，提高了页面加载速度，优化网站性能！那么如何使用呢？接着往下看↓（注：例子的代码是为了方便演示，代码可以根据自己的需求来更改）
工具/原料
1
电脑
2
网站开发编辑器
效果展示
CSS精灵图效果展示（列表图标只需插入一张背景图片）
方法/步骤
1
准备好一张精灵图（可以通过PS将所以图片整合到一起）
2
打开网站开发工具新建一个HTML文档
4
给标签编写合适的CSS代码：核心代码：
5
编写CSS精灵图片代码核心代码：.sprites li span.icon1{ background-position: -62px -36px} .sprites li span.icon2{ background-position: -86px -36px} .sprites li span.icon3{ background-position: -110px -36px} .sprites li span.icon4{ background-position: -133px -36px} .sprites li span.icon5{ background-position: -158px -36px}
注意事项
1
例子的代码是为了方便演示，代码可以根据自己的需求来更改
2
核心代码：background-position 背景定位属性