CSS Sprites(精灵图)

CSS Sprites技术是一种通过将图像合并到单个文件中来减少对图像资源发出的HTTP请求数量的方法。

什么是精灵图

子画面是二维图像，由在定义的X和Y坐标下将小图像组合成一个大图像组成。

要显示组合图像中的单个图像，可以通过使用CSS background-position属性，定义要显示的图像的确切位置。

使用CSS Image Sprite的优势

具有许多图像，尤其是许多小图像（例如图标，按钮等）的网页可能需要很长时间才能加载并生成多个服务器请求。

使用图像精灵而不是单独的图像将大大减少浏览器向服务器发出的HTTP请求数量，这对于缩短网页的加载时间和网站的整体性能非常有效。

查看以下示例，您将看到一个明显的不同。当您第一次将鼠标指针放在非Sprite版本的浏览器图标上时，将在一段时间后出现悬停图像，这是因为悬停图像是在鼠标悬停时从服务器加载的，因为正常图像和悬停图像都是两个不同的图像。

而在Sprite版本中，由于所有图像都合并在一个图像中，因此鼠标悬停时会立即显示悬停图像，从而产生平滑的悬停效果。使用CSS Sprite后，用户通过访问合成的图像，可以减少HTTP请求次数，文件总大小也将缩小，可以提高访问的效率。

使图像精灵

我们通过将10张单独的图像组合到一个图像（mySprite.png）中来制作此sprite图像。您可以使用任何喜欢的图像编辑工具来创建自己的精灵。

从图像精灵显示图标

最后，利用CSS，我们可以仅显示所需图像精灵的一部分。

首先，我们将创建.sprite将加载精灵图像的类。这是为了避免重复，因为所有项目共享相同的背景图像。

.sprite {
    background: url("images/mySprite.png") no-repeat;
}

现在，我们必须为要显示的每个项目定义一个类。例如，要显示Internet Explorer图标的形式，图像精灵将是CSS代码。

.ie {
    width: 50px; /* Icon width */
    height: 50px; /* Icon height */
    display: inline-block; /* Display icon as inline block */
    background-position: 0 -200px; /* Icon background position in sprite */
}

现在出现了问题，我们如何获得这些像素值background-position？让我们找出答案。第一个值是背景的水平位置，第二个是背景的垂直位置。由于Internet Explorer图标的左上角接触到左边缘，因此它与起点的水平距离（即图像精灵的左上角）为0，并且由于它位于第5个位置，因此其与起点的垂直距离图片精灵的位置是4 X 50px = 200px，因为每个图标的高度均为50px。

要显示Internet Explorer图标，我们必须将其左上角移动到起点，即图像精灵（mySprite.png）的左上角。另外，由于此图标的垂直距离为200px，因此我们需要将整个背景图像（mySprite.png）垂直向上移动200px，这要求我们将值应用为负数-200px，因为负值会使它垂直向上移动，而正值会使它向下移动。但是，它不需要水平偏移，因为Internet Explorer图标的左上角之前没有像素。

使用CSS Image Sprite创建导航菜单

在上一节中，我们学习了如何显示图像精灵中的单个图标。这是使用图像精灵的最简单方法，现在我们将通过构建一个具有翻转效果的导航菜单向前迈出一步。

在这里，我们将使用相同的精灵图像（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; /* To sift text off the background-image */
    color: #3E789F;
    background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
}

步骤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代码：