使用 CSS 精灵图优化您的页面
如何使用 CSS 精灵图优化您的页面。
假设你的老板打电话告诉你，公司新上线到生产服务器的页面用户体验非常糟糕，加载过程耗时很长，用户需要等待才能开始使用。
你作为一名优秀的开发人员/设计师，通过跟踪网络请求/响应发现主要问题在于页面上使用的图片的下载过程… 假设有 100 张图片（数量相当大，不是吗？）。
你检查了这些图片的大小，没有一张图片太大（最大 1kb - 10kb），这时你的老板看着你，你却对此无从解答… 那么该怎么办呢？开始责怪用户的电脑（“是他们的错，他们应该升级到更好的互联网连接，至少 T1”），还是开始责怪框架？（“是 PHP/.NET/Java 的错，我早就告诉过你，选择 PHP/.NET/Java 真是个糟糕的主意”），或者其他能拯救你灵魂于地狱的事情 :) 。
这时，一种名为 CSS Sprites 的技术就派上用场了。这个想法源自游戏行业，也可以应用于 Web 开发。主要思想是将所有图片（在本例中为 100 张图片）放在一张大图中，然后使用 CSS 移动坐标，在新建的这张大图中显示给定元素的正确图片。
让我们创建一个小演示来展示这项技术
最终结果应该是这样的：
这是我们的基本标记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.container div
{
border: 1px solid;
float: left;
height: 100px;
left: 20px;
margin-left: 12px;
margin-top: 50px;
position: relative;
width: 100px;
}
.blue
{
}
.red
{
}
.yellow
{
}
</style>
</head>
<body>
<div class="container">
<div class="blue">
</div>
<div class="red">
</div>
<div class="yellow">
</div>
</div>
</body>
</html>
这些是我们的图片
 |  |  |
|
blue.jpg
|
yellow.jpg
|
red.jpg
|
现在，传统的方法是为每个选择器设置 background-image 来定位正确的图片，就像这样
.blue
{
background-image:url('blue.jpg');
}
.red
{
background-image:url('red.jpg');
}
.yellow
{
background-image:url('yellow.jpg');
}
而且，它确实有效。但是问题在于，你需要向服务器发送 3 次请求来获取这些图片。你可以使用 CSS Sprites 获得相同的结果，首先使用你最喜欢的图像编辑软件（Photoshop），我们将合并这些图片，最终结果应该如下所示
 |
|
sprite.jpg
|
现在，神奇的事情发生了，让我们更改选择器以使用这张大图，并移动每个方块的坐标，直到获得所需的结果
.container div
{
border: 1px solid;
float: left;
height: 100px;
left: 20px;
margin-left: 12px;
margin-top: 50px;
position: relative;
width: 100px;
background-image: url('sprite.jpg');
}
.blue
{
background-position: -100px 0px;
}
.red
{
background-position: -200px 0px;
}
.yellow
{
background-position: -0px 0px;
}
就这样，我所做的是将容器内所有 div 的 background-image 属性分配给我们的 sprite.jpg 图片。之后，我分配一个 background-position 来显示整个图像的正确部分。此外，你获得了相同的结果，但减少了对服务器的访问次数，这不是很酷吗？
好了，这就是全部内容，希望你喜欢我的第一篇文章。
你可以从 这里 下载示例代码。
再见！
无耻的推广：你可以在我的博客 这里 查看这篇文章。