CSS Sprites

Created: October-16, 2018

CSS sprites 技术是一种通过在单个文件中组合图像来减少为图像资源做出的 HTTP 请求数量的方法。

什么是 Spirtes

Spirtes 是二维图像，其由将小图像组合成在定义的 X 和 Y 坐标处的一个较大图像组成。

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

使用 CSS 图像 Spirtes 的优点

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

使用图像 Spirtes 而不是单独的图像将显着减少浏览器对服务器的 HTTP 请求数量，这对于改善网页的加载时间和整体网站性能非常有效。

注意： 减少 HTTP 请求的数量会对缩短响应时间产生重大影响，从而使网页对用户的响应速度更快。

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

在 Spirtes 版本中，由于所有图像都组合在一个图像中，因此鼠标悬停时会立即显示悬停图像，从而实现平滑的悬停效果。

下面解释 Sprites 工作的整个过程。

制作图像 Spirtes

我们通过在单个图像（mySprite.png）中组合 10 个单独的图像来制作这个 Spirtes 图像。你可以使用你喜欢的任何图像编辑工具创建自己的 Spirtes。

提示： 为简单起见，我们使用了相同大小的图标，并将它们彼此靠近放置，以便于计算偏移量。

从图像 Spirtes 显示图标

最后，利用 CSS，我们可以只显示我们需要的图像 Spirtes 的一部分。

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

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

现在，我们必须为要显示的每个项目定义一个类。例如，要显示 CSS 代码所用的图像 Spirtes 的 Internet Explorer 图标。

.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 图标的左上角触及左边缘，因此其距起点（即图像 Spirtes 的左上角）的水平距离为 0，因为它位于第 *5 个位置，*因此它与图像 Spirtes 起点的垂直距离是 4 X 50px = 200px，因为每个图标的高度是 50px。

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

提示： 只需在即将到来的示例中使用属性值，你就可以快速了解偏移的工作原理。 background-position

使用 CSS Image Sprite 创建导航菜单

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

在这里，我们将使用相同的 Spirtes 图像（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 cl ass="opera"><a href="#">Opera</a></li>
    <li class="safari"><a href="#">Safari</a></li>
</ul>

在导航上应用 CSS

以下部分将介绍如何将上面示例中给出的简单无序列表转换为使用 CSS 的基于 spite 图像的导航。

第 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 步：设置每个链接的默认状态

现在，我们必须为每个菜单项定义一个类，因为图像 Spirtes 中的每个项目都有不同的 background-position。例如，Firefox 图标位于起始点，即图像 Spirtes 的左上角，因此无需移动背景图像。因此，在这种情况下，背景的垂直和水平位置将为 0。同样，你可以为图像 Spirtes 中的其他图标定义背景位置。

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 步：添加链接的悬停状态

添加悬停状态具有与添加上述链接相同的原则。只需将它们的左上角移动到图像 Spirtes 的起点（即左上角），就像我们上面所做的那样。你可以使用以下公式简单地来计算 background-position ：

Vertical position of hover state = Vertical position of normal state - 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 type="text/css">
    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; /* To sift text off the background-image */
        color: #3E789F;
        background: url("images/mySprite.png") no-repeat; /* As all link share the same background-image */
    }
    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>