Css 简明教程

CSS - Image Sprites

图片精灵是一种在 Web 开发中用于将多张图片组合成单个图片文件的方法。此方法可以帮助减少服务器请求数量，并提高网站性能。

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

以下分步指南说明了如何在 CSS 中创建和使用图片精灵：

Step 1: Create The Sprite Image

创建一张包含你希望在网站上使用的所有单个图片（图标、按钮等）的图片文件。你可以使用 Photoshop 或类似工具将这些图片排列到一张图片文件中。
以 PNG 或 JPEG 等合适格式保存精灵图片。确保精灵中的各个图片组织良好，且彼此之间具有间距一致。

Step 2: Add HTML Markup

在你的 HTML 文档中，你需要添加将从精灵中显示各个图片的元素。为此，通常你会使用 <div> 或 <span> 等 HTML 元素。以下是一个示例：

<html>
<head>
  <!-- CSS styling here -->
</head>
<body>
  <div class="sprite-icon"></div>
</body>
</html>

Step 3: Define CSS Classes

在你的 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 属性来指定显示部分精灵图像。值 (-16px, -16px) 表示精灵中所需的图像位置。通过调整这些值，您可以精灵中显示不同的图像。

Step 4: Use The Sprites In HTML

你现在可以使用在 HTML 元素中定义的 CSS 类来显示精灵中的各个图像：

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

对从精灵显示图像的每个元素重复此过程。

CSS Image Sprites - Basic Example

以下示例演示如何使用 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 Image Sprites - Hover Effect

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

<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>