CSS - 图像精灵

图像精灵是 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>

打印本页