CSS 图像组合 - 易学教程，面试笔记经验！

CSS Sprite 是 Web 开发中使用的一种技术，用于将多个图像组合成一个图像文件。这种方法可以帮助减少服务器请求数量并提高网站性能。

CSS sprite 通常用于网站上的图标、按钮和其他小图形。然后使用 CSS 根据需要显示sprite的特定部分。

以下是有关如何在 CSS 中创建和使用sprite的分步指南:

第 1 步 :创建 Sprite 图像

创建一个图像文件，其中包含您要在网站上使用的所有单个图像（图标、按钮等）。您可以使用 Photoshop 等软件或类似工具将这些图像排列成单个图像文件。
以合适的格式（如 PNG 或 JPEG）保存sprite。确保sprite 中的各个图像组织良好，图像之间的间距一致。

第 2 步:添加 HTML 标记

在 HTML 文档中，您需要添加将显示sprite 中的各个图像的元素。通常，您将使用 <div> 或 <span> 等 HTML 元素来实现此目的。下面是一个示例:

<html>
<head>
  <!-- 这里的 CSS 样式 -->
</head>
<body>
  <div class="sprite-icon"></div>
</body>
</html>

第 3 步:定义 CSS 类

在 CSS 文件/样式标记（内联样式）中，为使用sprite的每个元素定义类。您将 background-image 设置为sprite并指定 background-position 显示sprite 所需的部分。下面是一个示例:

.sprite-icon {
   width: 32px; /* 设置显示图像的宽度 */
   height: 32px; /* 设置显示图像的高度 */
   background-image: url('sprites.png'); /* 图像的路径 */
   background-position: -16px -16px; /* 单个图像的位置 */
   }

在上面的示例中，background-position 属性用于指定要显示sprite的哪一部分。值（-16px、-16px）表示所需图像在sprite 中的位置。通过调整这些值，您可以显示sprite 中的不同图像。

第 4 步:在 HTML 中使用sprite

您现在可以使用在 HTML 元素中定义的 CSS 类来显示sprite 中的各个图像:

<div class="sprite-icon"></div>

对需要显示sprite 中的图像的每个元素重复此过程。

CSS sprite: 基本示例

以下示例演示如何使用 CSS sprite显示单个图像文件中的多个图像。

<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('/css/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>原始图片</h3>
   <img class="orignal-img" src="/css/images/devices.png"/>
   <h3>实现 CSS 图像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 sprite: 悬停效果

以下示例演示如何使用sprite创建悬停效果，当您将鼠标悬停在图像上时，图像会变得稍微透明 -