作为一个网站所有者，可能最糟糕的体验，你可以为你的访问者提供的是一个令人沮丧的等待，同时时钟旋转和页面加载。在大多数情况下，潜在客户会按下浏览器上的后退键，然后前往其他地方;这不可避免地意味着潜在业务的损失。
网站速度已经成为谷歌的顶级之一排名的因素．
如果你希望你的网站是用户友好的，并在主要搜索引擎的行列中处于有利位置，那么你应该寻找方法来提高你的网站网页性能．除了谷歌中显示的无数选项之外网站管理员工具，包括合并和压缩外部文件，以及检查你网站上的坏链接，我建议你看看你使用图像的方式。最好的网页设计技术之一就是使用CSS精灵。
什么是CSS精灵?
这可能是一种常见的误解，即精灵意味着一系列小图像。相反，aCSS精灵是一张大图。您可能了解CSS技术，该技术为包含在单个图像中的按钮显示“开/关”状态，并使用背景位置CSS属性:徘徊(请参阅关于a的教程按钮，使用CSS精灵）.
CSS精灵基本上是相同的概念:图像使用CSS中指定的坐标显示在页面上，只有这个区域是可见的。很容易相信，在文件总大小方面，许多小图像可能比包含所有放置在一起的图像的文件要轻。但是，即使你的图片只有几个字节大小，每一张图片都会给你的web服务器发送HTTP请求带来不必要的工作。
每个请求都包含一部分使用有价值的站点带宽的开销信息。使用CSS精灵可以减少HTTP请求的数量，并且可以使网页看起来反应更快，因为所有的界面元素在用户处理它们之前就已经下载了。这种技术对于提高站点性能非常有效，特别是在使用许多小图像(如菜单图标)的情况下。
构建一个基本的CSS图像背景精灵
让我们通过一个例子来讨论这个主题。使用Photoshop，我创建了一个带有一系列图像(公司标志)的文档，并将该区域划分为100像素的块(见下图)。我保存了文件，并给它命名logos.jpg．
为了说明本文中的概念，我在徽标之间使用了100像素的测量值，因为在每次操作CSS中的坐标时，这个距离可以方便地移动CSS背景图像的位置(在实际应用CSS精灵以进一步减小其文件大小时，您应该更准确)。CSS背景图像只显示由绿色边框定义的第一个logo，其坐标为y = 0和x = 0。
来定位它们，我们使用背景位置属性。
要在第一张图像旁边显示第二张图像，所需要做的就是调整x轴上的坐标。由于我们构建图像的方式(以100像素间隔)，我们所需要做的就是添加一行CSS，将x轴向前推进100像素来显示每个徽标。
CSS背景精灵
#logo{高度:64px;保证金:0;填充:0;} #logo li{背景:url(/logo .jpg)左上角无重复;保证金:0;填充:0;list-style:没有;位置:绝对的;{#logo{高度:64px;显示:块;}//第一个标志#logo li a.jaz {background-position: 0 0}//第二个标志#logo li a.s iberotel {background-position: 0 -100px;}//第三个标志#李国强{background-position: 0 -200px;}//第四个标志#logo li a.travcotels {background-position: 0 -300px;}//第五个标志{background-position: 0 -400px;}
使用CSS精灵的结果
在上面的例子中，可以将文件大小从52kb减少到22kb，并将HTTP请求的数量从5个减少到1个。这代表了一个很好的保存，而且只是一个网页的一小部分!我们新的CSS精灵方法在大多数现代浏览器中测试良好。
关于CSS精灵的进一步阅读
下面是关于CSS精灵的推荐阅读资源列表。
参考文献
- 网络浏览器的使用份额(2010年5月)
