让我们从头开始吧. 什么是CSS Sprites?
CSS sprites (CSS精灵，也有人翻译成CSS妖精) 是一种通过整合图片来改善我们的页面的加载时间，减少服务器请求数的方法。在这篇文章里，我将教你如何来实现它们。
为了搞清楚什么是CSS sprite ,这里是一张 Google制作的CSS 精灵图片：
当你用谷歌搜索的时候，你会发现页面底部的分页，你会看到就像这样的东西： Gooooooooooooooogle. 字母 ‘o’ 是用CSS sprite平铺的，这样就替代了重复加载15次字母，它只是加载了包含所有字母的精灵，一次完成。
创建我们的CSS sprite – 步骤一: 制作图片
Ok, 首先，我们必须制作我们的精灵图片。你可以使用Fireworks，Photoshop或任何你能使用的软件。这里是我做的：
正如你看到的，精灵是由一些中间被1像素款的线划分开来的图像组成的。这种区分不是真的必须的，就像你所看到的谷歌的精灵，但当我们写CSS的时候它使我们的工作更加方便，请相信我。
步骤二: 创建我们的精灵图片显示者(显示层)
一旦我们制作了我们的精灵图片，我们必须制作一个透明的1px x 1px gif图片。这个图片稍后会是在我们的精灵里用来显示不同的图片的东西。
步骤三：编写CSS代码
首秀安，我们先创建一个类’sprite’，它将加载我们的Sprite图片。
|
1 |
.sprite {background:url(../images/mySprite.png);} |
在加载我们的精灵之后，我们必须精确定义里面的图片的高度和宽度。
左右的图片有同样的高度，所有的应用也是，我可以给他们一个class来共用他们的高度。我将使用这两个class：’monster’ 和 ‘application’。
|
1 2 3 4 |
.sprite {background:url(../images/mySprite.png);} .monster {height:128px;} .application {height:61px;} |
现在，我们必须定义每一个图片的宽度，因为他们是不同的。我们将为他们中的每一个定义一个class。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.sprite {background:url(../images/mySprite.png);} .monster {height:128px;} .application {height:61px;} /* Monsters */ .doctor {width:103px;} .octopus {width:89px;} .wolf {width:115px;} .star {width:126px;} .dog {width:128px;} /* Applications -*/ .css {width:61px;} .activityMonitor {width:58px;} .dashboard {width:51px;} .quicktime {width:53px;} .scanner {width:74px;} |
做完了？ Ok, 现在到最精彩的部分了。为了恰当的显示，我们必须对每一个图片定义个 background-position。 这个background-position 必须一直有负值，因为我们的背景图片必须向左移动，来显示不同的图片。
我们必须让精灵里面的图片想左上角移动，因为那里是我们开始看图片的起点。那个角相当于 X轴的0px, Y轴的0px。
然而，我的精灵在左边和上边两个像素的空白，所以当我们定义元素的background-position时我们必须重视它们。
记住background-position的第一个值, 是水平方向(x-轴) ，第二个是垂直方向(y-轴). 让我们完成我们的这头狼。我们的狼需要想左移动196px并向上移动 2px 。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.sprite {background:url(../images/mySprite.png);} .monster {height:128px;} .application {height:61px;} /* Monsters */ .doctor {width:103px;} .octopus {width:89px;} .wolf {width:115px; background-position:-196px -2px;} .star {width:126px;} .dog {width:128px;} /* Applications -*/ .css {width:61px;} .activityMonitor {width:58px;} .dashboard {width:51px;} .quicktime {width:53px;} .scanner {width:74px;} |
现在让我们用同样的方法来完成所有的图片：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.sprite {background:url(../images/mySprite.png);} .monster {height:128px;} .application {height:61px;} /* Monsters */ .doctor {width:103px; background-position:-2px -2px;} .octopus {width:89px; background-position:-106px -2px;} .wolf {width:115px; background-position:-196px -2px;} .star {width:126px; background-position:-312px -2px;} .dog {width:128px; background-position:-439px -2px;} /* Applications -*/ .css {width:61px; background-position:-2px -133px;} .activityMonitor {width:58px; background-position:-64px -133px;} .dashboard {width:51px; background-position:-123px -133px;} .quicktime {width:53px; background-position:-175px -133px;} .scanner {width:74px; background-position:-229px -133px;} |
看一下这个元素的Y轴，所有的怪兽，和所有的应用(的Y轴)是一样的。这是因为他们在同样的垂直位置排在一行。因此，他们全部分享到顶部变现同样的距离。
步骤四： 编写HTML 代码(小意思)
|
1 2 3 4 5 6 7 8 9 10 |
<img src="images/transparent.gif" alt="Doctor Image" /> <img src="images/transparent.gif" alt="Octopus Image" /> <img src="images/transparent.gif" alt="Wolf Image" /> <img src="images/transparent.gif" alt="Star Image" /> <img src="images/transparent.gif" alt="Dog Image" /> <img src="images/transparent.gif" alt="Css Image" /> <img src="images/transparent.gif" alt="ActivityMonitor Image" /> <img src="images/transparent.gif" alt="Dashboard Image" /> <img src="images/transparent.gif" alt="Quicktime Image" /> <img src="images/transparent.gif" alt="Scanner Image" /> |
定义这些代码用我们之前做的透明的1PX x 1PX gif图片，添加样式，然后就是精灵的时间了！
这个方法的现在
要使CSS精灵工作的话，必须始终有一个宽度、高度和背景位置。如果你没有定义元素的高度或宽度，你将在那个图片上看到整个精灵图片。相当纠结但是还比较好接受。
教程中用到的图标
这个教程中用到的图标是David Lanham制作的Somatic Xtras 2 Icons 。