图像精灵是 Web 开发中使用的一种技术，用于将多个图像组合成一个图像文件。这种方法可以帮助减少服务器请求的数量并提高网站性能。
图像精灵通常用于网站上的图标、按钮和其他小图形。然后，根据需要使用 CSS 来显示 Sprite 图像的特定部分。
以下是有关如何在 CSS 中创建和使用图像精灵的分步指南：
第 1 步：创建精灵图像
- 创建一个图像文件，其中包含您要在网站上使用的所有单个图像（图标、按钮等）。您可以使用 Photoshop 等软件或类似工具将这些图像排列成一个图像文件。
- 将精灵图像保存为合适的格式，如 PNG 或 JPEG。确保 Sprite 中的各个图像组织良好，它们之间的间距一致。
第 2 步：添加 HTML 标签
在您的 HTML 文档中，您需要添加元素来显示 sprite 中的单个图像。通常，您将使用 <div> 或 <span> 等 HTML 元素来实现此目的。下面是一个示例：
<html>
<head>
<!-- CSS styling here -->
</head>
<body>
<div class="sprite-icon"></div>
</body>
</html>步骤 3：定义 CSS 类
在你的CSS文件/样式标签（内联样式）中，为每个使用精灵图像的元素定义类。您需要将 background-image 设置为您的精灵图像，并指定 background-position 以显示精灵的所需部分。下面是一个示例：
.sprite-icon {
width: 32px; /* Set the width of the displayed image */
height: 32px; /* Set the height of the displayed image */
background-image: url('sprites.png'); /* Path to your sprite image */
background-position: -16px -16px; /* Position of the individual image within the sprite */
} 在上面的示例中，background-position 属性用于指定要显示 Sprite 图像的哪一部分。值 （-16px， -16px） 表示所需图像在 Sprite 中的位置。通过调整这些值，您可以显示与精灵不同的图像。
第 4 步：在 HTML 中使用精灵
现在，您可以使用在 HTML 元素中定义的 CSS 类来显示 sprite 中的单个图像：
<div class="sprite-icon"></div>对需要显示 Sprite 中的图像的每个元素重复此过程。
CSS 图像精灵 - 基本示例
以下示例演示如何使用 CSS 图像精灵来显示单个图像文件中的多个图像。
<html>
<head>
<style>
.orignal-img {
width: 300px;
height: 100px;
}
ul {
list-style: none;
padding: 0;
}
li {
height: 150px;
display: block;
}
li a {
display: block;
height: 100%;
}
.bootstrap, .html, .css {
width: 150px;
height: 150px;
background-image: url('images/devices.png');
background-repeat: no-repeat;
}
.bootstrap {
background-position: -5px -5px;
}
.html {
background-position: -155px -5px;
}
.css {
background-position: -277px -5px;
}
</style>
</head>
<body>
<h3>Orignal Image</h3>
<img class="orignal-img" src="images/devices.png"/>
<h3>After implementing CSS image sprites</h3>
<ul class="navbar">
<li><a href="#" class="bootstrap"></a></li>
<li><a href="#" class="html"></a></li>
<li><a href="#" class="css"></a></li>
</ul>
</body>
</html>CSS 图像精灵 - 悬停效果
以下示例演示了如何使用图像精灵创建悬停效果，其中当您将鼠标悬停在图像上时，图像会变得略微透明 -
<html>
<head>
<style>
.orignal-img {
width: 300px;
height: 100px;
}
ul {
list-style: none;
padding: 0;
}
li {
height: 150px;
display: block;
}
li a {
display: block;
height: 100%;
}
.bootstrap, .html, .css {
width: 150px;
height: 150px;
background-image: url('images/devices.png');
background-repeat: no-repeat;
}
.bootstrap {
background-position: -5px -5px;
}
.html {
background-position: -155px -5px;
}
.css {
background-position: -277px -5px;
}
.bootstrap:hover, .html:hover, .css:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h3>Orignal Image</h3>
<img class="orignal-img" src="images/devices.png"/>
<h3>After implementing CSS image sprites</h3>
<ul class="navbar">
<li><a href="#" class="bootstrap"></a></li>
<li><a href="#" class="html"></a></li>
<li><a href="#" class="css"></a></li>
</ul>
</body>
</html>