创建简单有用的CSS Sprites

让我们从头开始吧. 什么是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图片。 .sprite {background:url(../images/mySprite.png);} 在加载我们的精灵之后，我们必须精确定义里面的图片的高度和宽度。 左右的图片有同样的高度，所有的应用也是，我可以给他们一个class来共用他们的高度。我将使用这两个class：’monster’ 和 ‘application’。 .sprite {background:url(../images/mySprite.png);} .monster {height:128px;} .application {height:61px;} 现在，我们必须定义每一个图片的宽度，因为他们是不同的。我们将为他们中的每一个定义一个class。 .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, [...]