CSS雪碧图、精灵技术，这个名字听起来就很装B的样子

CSS雪碧图、精灵技术，嗯，还有一个比较接地气的名字叫做图片合成，其实这三个在CSS中都是指同一个玩意儿

实现原理：

css background-position控制一个层可显示的区域范围大小，通过一个窗口进行背景图的定位

先说下优点：

1、减小图片的字节（这个我感觉没啥卵用，就算合成一张图片之后也不见得真的会小）
2、减少网页的http请求，从而大大的提高页面的性能（这个就比较屌了）
3、解决命名困扰（惹）
4、维护及修改方便、只需要在一张图上修改图片的颜色或样式即可
5、想到了再说…

再说下缺点：

没有缺点（不可能的！这辈子都不可能的）我觉得唯一的缺点就是定位的时候稍微麻烦点，有时候UI给的图不规范的话得去计算（比如每个格子是长方形的，就很痛苦…就像下面的例子…）

提示一下，如果UI给的是二倍图的话设置一下background-size:x y; x为原图宽的一半 ，y为原图高的一半

给三倍图的话就三分之一惹

<ul class="items">
    <li class="c-01"></li>
    <li class="c-02"></li>
    <li class="c-03"></li>
    <li class="c-04"></li>
    <li class="c-05"></li>
    <li class="c-06"></li>
    <li class="c-07"></li>
    <li class="c-08"></li>
    <li class="c-09"></li>
    <li class="c-10"></li>
</ul>

// 写的LESS，通过webstorm自动生成的CSS
<style>
.items{
    margin: 0 auto;
    width: 1000px;
    overflow: hidden;
    li{
        float: left;
        width: 125px;
        height: 95px;
        background-image: url("/static/4.0/images/index/client_sprite.png");
        background-repeat: no-repeat;
        background-size: 999px 439px; // 实际上给的是二倍图 这里尺寸做成了原图的一半
        &.c-01{ background-position: 30px 0;}
        &.c-02{ background-position: -105px 0;}
        &.c-03{ background-position: -235px 0;}
        &.c-04{ background-position: -370px 0;}
        &.c-05{ background-position: -505px 0;}
        &.c-06{ background-position: -640px 0;}
        &.c-07{ background-position: -770px 0;}
        &.c-08{ background-position: -905px 0;}
        &.c-09{ background-position: 30px -95px;}
        &.c-10{ background-position: -105px -95px;}
    }
}
</style>