CSS 图像精灵
CSS 图像精灵技术是一种通过将图像组合在一个文件中来减少对图像资源的 HTTP 请求数量的方法。
什么是图像精灵
图像精灵是二维图像，由在定义的 X 和 Y 坐标处将小图像组合成一个较大的图像组成。
要显示组合图像中的单个图像，您可以使用 CSS 背景位置 属性，定义要显示的图像的确切位置。
使用 CSS 图像精灵的优势
一个包含很多图片的网页，尤其是很多小图片，如图标、按钮等，可能需要很长时间才能加载并生成多个服务器请求。
使用图像精灵而不是单独的图像将显着减少浏览器向服务器发出的 HTTP 请求的数量，这对于提高网页的加载时间和网站的整体性能非常有效。
注意：减少 HTTP 请求的数量对减少响应时间有重大影响，从而使网页对用户的响应速度更快。
查看以下示例，您将看到一个明显的区别； 当您第一次将鼠标指针放在非精灵版本的浏览器图标上时，悬停图像会在一段时间后出现，这是因为悬停图像是在鼠标悬停时从服务器加载的，因为正常和悬停图像是 两个不同的图像。
而在精灵版本中，由于所有图像都组合在一个图像中，悬停图像会在鼠标悬停时立即显示，从而产生平滑的悬停效果。
 |
 |
使用 CSS sprite 技术演示在：[EXAMPLE - B] 与 [EXAMPLE - A] 相比，我们能够将 HTTP 请求的数量减少 9 个，图像的总文件大小减少 38.2 KB；。 对于这样一个小例子来说，这是一个相当大的改进。 想象一下你可以在一个完整的网站上做什么。
下面解释创建这个例子的整个过程。
制作图像精灵
我们通过将 10 个单独的图像组合在一个图像中来制作这个精灵图像 (mySprite.png)。 您可以使用您喜欢的任何图像编辑工具创建自己的精灵。
提示： 为简单起见，我们使用了所有相同大小的图标，并将它们彼此靠近放置以便于计算偏移量。
从图像精灵中显示一个图标
最后，利用 CSS，我们可以只显示我们需要的图像精灵的一部分。
首先，我们将创建类 .sprite 来加载我们的精灵图像。 这是为了避免重复，因为所有项目共享相同的背景图像。
.sprite {
background: url("images/mySprite.png") no-repeat;
}现在，我们必须为要显示的每个项目定义一个类。 例如，要以 CSS 代码的图像精灵的形式显示 Internet Explorer 图标。
.ie {
width: 50px; /* 图标宽度 */
height: 50px; /* 图标高度 */
display: inline-block; /* 将图标显示为内联块 */
background-position: 0 -200px; /* 精灵中的图标背景位置 */
}现在问题来了，我们是如何得到 background-position 的像素值的？ 让我们来了解一下。 第一个值为水平位置，第二个值为背景垂直位置。 由于 Internet Explorer 图标的左上角接触到左边缘，所以它到起点的水平距离，即图像精灵的左上角是 0，因为它放在 第 5 位 上，所以它到起点的垂直距离 图片精灵的高度是4 X 50px = 200px，因为每个图标的高度是50px。
要显示 Internet Explorer 图标，我们必须将其左上角移动到起点，即图像精灵 (mySprite.png) 的左上角。 此外，由于此图标放置在 200px 的垂直距离处，我们需要将整个背景图像 (mySprite.png) 垂直向上移动 200px，这需要我们将值应用为负数，即 -200px，因为负值使它垂直向上，而正值使它向下移动。 但是，它不需要水平偏移，因为 Internet Explorer 图标的左上角之前没有像素。
提示：只需在接下来的示例中使用 背景位置 属性的值，您将很快了解偏移量的工作原理。
使用 CSS 图像精灵创建导航菜单
在上一节中，我们学习了如何从图像精灵中显示单个图标。 这是使用图像精灵最简单的方法，现在我们将通过构建具有 翻转效果 的导航菜单向前迈出一步，如 [EXAMPLE - B] 所示。
在这里，我们将使用相同的精灵图像 (mySprite.png) 来创建我们的导航菜单。
导航的基础 HTML
我们将从创建带有 HTML 无序列表的导航菜单开始。
<ul class="menu">
<li class="firefox"><a href="#">Firefox</a></li>
<li class="chrome"><a href="#">Chrome</a></li>
<li class="ie"><a href="#">Explorer</a></li>
<li class="opera"><a href="#">Opera</a></li>
<li class="safari"><a href="#">Safari</a></li>
</ul>在导航上应用 CSS
以下部分将介绍如何使用 CSS 将上面示例中给出的简单无序列表转换为基于图像的导航。
第 1 步：重置列表结构
默认情况下，HTML 无序列表 与项目符号一起显示。 我们需要通过将 list-style-type 属性设置为 none 来删除默认项目符号。
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}第 2 步：为每个链接设置通用属性
在这一步中，我们将设置所有链接将共享的所有公共 CSS 属性。 例如，color, background-image, display, padding 等。
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px; /* 从背景图像中筛选文本 */
color: #3E789F;
background: url("images/mySprite.png") no-repeat; /* 由于所有链接共享相同的背景图像 */
}步骤 3：设置每个链接的默认状态
现在，我们必须为每个菜单项定义一个类，因为图像精灵中的每个项都有不同的 background-position。 例如，Firefox 图标放置在起始点，即图像精灵的左上角，因此无需移动背景图像。 因此，在这种情况下，背景的垂直和水平位置将为 0。类似地，您可以为图像精灵中的其他图标定义背景位置。
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}第 4 步：添加链接的悬停状态
添加悬停状态与添加上述链接的原理相同。 只需将它们的左上角移动到图像精灵的起点（即左上角），就像我们上面所做的那样。 您可以使用以下公式简单地计算 background-position：
悬停状态的垂直位置 = 正常状态的垂直位置 - 50px
由于翻转图像刚好低于默认状态，每个图标的高度等于 50px。 图标的悬停状态也不需要水平偏移，因为它们的左上角之前没有像素。
ul.menu li.firefox a:hover {
background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
background-position: 0 -150px;
}
ul.menu li.ie a:hover {
background-position: 0 -250px;
}
ul.menu li.safari a:hover {
background-position: 0 -350px;
}
ul.menu li.opera a:hover {
background-position: 0 -450px;
}完毕！ 这是我们结合整个过程后的最终 HTML 和 CSS 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Sprite Navigation Menu</title>
<style>
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px; /* 从背景图像中筛选文本 */
color: #3E789F;
background: url("images/mySprite.png") no-repeat; /* 由于所有链接共享相同的背景图像 */
}
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
ul.menu li.firefox a:hover {
background-position: 0 -50px;
}
ul.menu li.chrome a:hover {
background-position: 0 -150px;
}
ul.menu li.ie a:hover {
background-position: 0 -250px;
}
ul.menu li.safari a:hover {
background-position: 0 -350px;
}
ul.menu li.opera a:hover {
background-position: 0 -450px;
}
</style>
</head>
<body>
<ul class="menu">
<li class="firefox"><a href="#">Firefox</a></li>
<li class="chrome"><a href="#">Chrome</a></li>
<li class="ie"><a href="#">Explorer</a></li>
<li class="opera"><a href="#">Opera</a></li>
<li class="safari"><a href="#">Safari</a></li>
</ul>
</body>
</html>