CSS Sprites 技术分析

CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 http://huoche.7234.cn/images/jb51/dnr2if1gsie.png举个例子，假如我们有这么一段代码，

max

min

<div class="max">最大化</div>
<div class="min">最小化</div>

这两个

class

.min, .max {
width:16px;
height:16px;
background-image:url(http://huoche.7234.cn/images/jb51/xckfbiddthv.png);
background-repeat: no-repeat; /*我们并不想让它平铺*/
text-indent:-999em; /*隐藏文本的一种方法*/
}

效果如下：

最大化
最小化

我们看到一团灰，没错，因为我们还没有指定

background-position

0 0

.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}

耶，我们成功了：

最大化
最小化

（注意：为了举例的方便，本例子直接在HTML内置样式，切勿在实践中的非特殊情况使用这种方式）。

优点

我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

缺点

至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。