1. 什么是CSS Sprites?
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
举个栗子:
emoji.jpg
变成:
emoji-2.png
2. CSS Sprites的优缺点
2.1 优点
- 很好地减少网页的http请求，从而大大的提高页面的性能。
- 减少图片的字节, 多张图片合并成1张图片的字节总是小于多张图片的字节总和。
- 解决了在图片命名上的困扰。
2.2 缺点
- 把多张图片有序的合理的合并成一张图片,还要留好足够的空间, 防止板块内出现不必要的背景；
- 在宽屏，高分辨率的屏幕下的自适应页面，如果图片不够宽，很容易出现背景断裂；
- 因为要测量计算每一个背景单元的精确位置，建议使用CSS Sprites 样式生成工具。
- CSS Sprites在维护时，如果页面背景有少许改动，一般就要改这张合并的图片。
总结：一般CSS Sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等CSS布局。总之很多时候需要权衡利弊，再决定是不是应用CSS Sprites。
3. 上图例子的代码
HTML代码:
<ul>
<li class="Emoji1"></li>
<li class="Emoji2"></li>
<li class="Emoji3"></li>
<li class="Emoji4"></li>
</ul>
CSS代码:
*{
margin: 0px;
}
ul,li{
list-style: none;
}
li{
width:50px;
height:50px;
overflow: hidden;
background: url('Emoji.jpg') -0px -0px no-repeat;
}
.Emoji1{ background-position: 0px 0px;}
.Emoji2{ background-position: 0px -50px;}
.Emoji3{ background-position: 0px -100px;}
.Emoji4{ background-position: 0px -150px;}
background-position 的两个参数: 第一个值是水平位置，第二个值是垂直位置。左上角的为 0 0. 具体参照W3School
如果觉得我写的还不错,请踩踩demos,这是一些常用效果的合集.持续更新ing.
