什么是CSS Sprites技术？

如果您熟悉网页设计的概念,那么你已经知道如何使用层叠样式表(CSS)的基本知识了。CSS Sprites允许你创建一个使用网格布局形式组合而成，并且包含网页中所有图片的单个图像文件,每次请求只需要请求单张图片，并且只向服务器发送一次请求（比如网页上有10张图片，本来要请求10次，但是使用CSS Sprites后只需请求一次！对于网页来说，每张图片都需要发送一次HTTP请求，CSS Sprites减少了HTTP请求的次数，减轻服务器压力）。Jason Cranford Teague 向您展示了如何使用CSS Sprites 优化你网站中的图片使之合并为一个文件。

PS：本文翻译自What Are CSS Sprites?"CSS Sprites"按照字面上翻译的意思是CSS精灵，一般称为图片精灵，但从功能上来说应该叫"CSS图片合并技术"更加贴切。

CSS Sprites的这个想法（还有这个名词的最后一部分，Sprite这个词语为精灵的意思）起源于早期的视频游戏，当时的内存和速度是十分有限并且十分珍贵的（当年的内存只有几百兆，现在的内存容量起码都是2G4G,8G也开始普遍了）。为了克服系统硬件上的限制，视频游戏生产商将游戏中成千上万用来创建游戏的小图片整合到一张网格图片中，然后在有需要调用的时候根据网格位置显示那个"sprite"小图片，屏蔽整个网格图片中其他不需要显示小图片。

使用CSS Sprites需要一点横向思维。一般情况下，我们把构建一个Web页面想象成类似于搭建乐高积木一样:每次构建一块（每张图片可以当成一个块，请求一张图片就需要构建一个块）。当然，你可以在整个网站中重复使用某个相同的图像“块”多次在页面中显示（依靠这犀利的缓存功能来加快渲染时间，一般一张图片在浏览器中被加载后都会缓存起来，所以网站上的相同的图片只会向服务器请求一次，其他时候则是调用缓存来获取图片，缓存内容一般都保存在用户的电脑里），但实际在载入结束后，每幅图像本身就是一个单独块。这样就造成了一些缺点，其中最大的问题是，每一个在你的网页界面中使用的小图像，不管多么小，都表示得向服务器发送一次HTTP请求，这极大减缓了你整个网页的整体呈现速度。

CSS Sprites允许你创建一个包含所需图片，并以网格布局的形式组合而成单独图像文件，这意味着每次调用只需要获取一张单独的图片和一次服务器请求，由于图片文件的空间被压缩了，所以图片文件的总大小和原来相比是大致相同的。在被CSS Sprites合并的图片文件中，你要将所有的独立小图片或者小切片在界面上以适当的间隔空间分隔开来并组合连接成一张图片，以防止小图片之间彼此不会被覆盖（就是将所需众多小图片按照一定的间隔整合成一张图片）。然后你只要设置图片背景的位置，图片背景显示的位置周边要有足够的间隔控件防止显示其他多余的图片，以保证其他小图片是被屏蔽隐藏的（见图1）。

使用CSS Sprites需要一些细致的规划。你必须要追踪每个图片的像素位置，和追踪每个单图片的文件路径相比，追踪图片像素位置应该显得简单的多。但是这并不比追踪被这个单一文件所取代了的每个单独图片文件的路径更困难。

一个快速入门的例子：按钮翻转

CSS按钮已经成为了网站开发者常用技术中的普遍技术。我们曾一度笨拙的使用JavaScript代码来实现当用户的鼠标滑过或者点击某个图片时改变它显示的外观样式，而现代的Web设计者运用css中的:link、:visited、 :hover和:active伪类来替换链接的背景图片而不用编写一行脚本代码。但是这种方法有一个小小的缺点，当图片文件在切换的时候会引发轻微或恼人的延迟。如果我们把所有的零星图片合并到一个单一的sprite文件中，那么这个问题就会消失。

创建背景图片：

首先，我们需要创建四个不同状态的图片，使它们以足够的间隔空间分隔开来以防止链接被图片给覆盖住一部分，而且我们也不会看到下一个按钮的状态暴露出来，如图2：

这里，我制作了一个尺寸不错的按钮状态图片,每个按钮状态和下个按钮状态之间的间隔为100像素。记住这点是很重要的，因为这意味着每一个按钮和上一个按钮的间隔为100像素，还有每个按钮都有10像素的顶部间距，使按钮在链接文字中显示的时候能更好的垂直居中对齐。你也可以把这张图片水平排列来代替垂直排列，前提是能知道每一列的最大宽度。当然，无论您用哪种方式布局你的sprites文件(水平或垂直),多余的图片控件都会增加一些小小的文件大小，但是如果你使用GIF格式或者PNG格式来保存文件，那么对于文件大小的影响就几乎可以忽略不计了。

注意

PS:这里的图片是下面例子要用到的，网友可右键另存为直接保存，原文章中的图片链接地址失效了，这个是我自己用GIMP作的，图片粗糙并且像素不太准确还请见谅。

平铺背景的图像元素类型是不能被包含在sprite文件中的（平铺就是重复显示的意思，将这张图片重复显示直到充满整个背景）。很显然，如果你需要显示重复图像的这种效果（即平铺背景的效果），我们不能仅用sprite文件的单个区域图片来重复调用以现实平铺的效果（sprites无法实现平铺背景的效果）。

建立样式

现在到代码时间了。首先，让我们使用无序列表建立链接列表

<ul>
<li><a href="#a">Link A</a></li>
   <li><a href="#b">Link B</a></li>
   <li><a href="#c">Link C</a></li>
   <li><a href="#d">Link D</a></li>
</ul>

目前这里还有没有特别什么令人激动的地方，还没有添加CSS样式，目前链接显示的效果如下：

• Link A
• Link B
• Link C
• Link D

当然，我们会使用我们自己的无序列表符号，所以我们需要去掉默认的项目符号（实心圆符号）来重新定义 <li>标签：

li {
   font: 3em "Times New Roman", Times, serif;
   margin: 0px;
   padding:0px;
   height: 90px;
   overflow: hidden;
   list-style: none; 
}

这里注意的是我还把列表元素的高度设置为90像素（不要忘记每个按钮状态之间可是有100像素的间隔）并隐藏了溢出的部分。
你应该根据你的实际需求来设置列表元素的高度，但前提是要确保其他的按钮状态在不需要显示时保持隐藏的状态。如果你目前使用的是IE之外的其它浏览器，您可以使用max-height这个CSS属性来设置最大高度，以便90像素的高度设置造成不必要的空间占用。

现在到了设置链接的时间了。我们将开始设置列表标签中的链接为普通的样式：

li a {
background: white url(/UserFiles/images/2014/05/635368345803555297/buttons.png)
0px 0px no-repeat;
padding-left: 40px; 
}

我们首先加载我们上面保存的图片（我把它命名为buttons.png并保存在一个名为images的图片文件夹中了。PS：这里我做了修改，buttons.png保存的地址为shiyousan.com/UserFiles/images/2014/05/635368345803555297/buttons.png）并设置了它的位置为左上角（0px 0px）,这意味着链接位置显示的是默认的状态，并且背景图没有重复。我们还需要设置链接左侧拥有足够的左内边距，以防止链接的文本部分与项目符号的背景图片重叠。这当然也是一种设计上的问题。我的这个例子可能会有点无聊因为我使用的是一个像灯泡的项目符号，但是你可能希望做一些更令人兴奋的事比如令项目符号背景图片和文本进行多重的互动。

我们现在需要定义每个状态的背景位置：

li a:link { color:#009900;background-position: 0px 0px; }
li a:visited {color:#996666;background-position: 0px -100px; }
li a:hover {color:#00cc00;background-position: 0px -200px; }
li a:active {color:#cccc00;background-position: 0px -300px; }

对于每一个链接状态，我们要让每个对应的背景图片向上移动100像素。对于每一个链接状态，每种状态显示的图片其实就是使用背景图片上下滑动而成的。

你可以看到一个完成的例子（如下面那样,也可以点击此链接打开,初始状态是绿色的暗灯，鼠标移动到链接上显示为发光的绿色灯泡，鼠标按住链接时显示的深橙的灯泡，鼠标点击过后显示的红色的灯泡。不过由于兼容问题，红色灯泡可能显示不了）:

这是一个你可以使用CSS Sprites来制作的简单链接翻转的例子。您不仅可以用更大的图像来创建各种状态的变化动态交互显示，还能用于所有包含在您的网站中的图形界面或网站样式背景（除了背景，PS：背景图片一般是单独一张，不使用CSS Sprites。其他需要很多小图片的样式则最好用CSS Sprites）。

有关Web设计的更多信息，请访问我们的网页设计参考手册或登录我们的网页设计通讯 。