Css 简明教程

CSS - Image Sprites

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

Image sprites are a technique used in web development to combine multiple images into a single image file. This approach can help reduce the number of server requests and improve website performance.

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

Image sprites are commonly used for icons, buttons, and other small graphics on a website. CSS is then used to display specific parts of the sprite image as needed.

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

Here’s a step-by-step guide on how to create and use image sprites in CSS:

Step 1: Create The Sprite Image

Create a single image file that contains all the individual images (icons, buttons, etc.) you want to use on your website. You can use software like Photoshop or a similar tool to arrange these images into a single image file.
Save the sprite image in a suitable format like PNG or JPEG. Make sure the individual images within the sprite are well-organized with consistent spacing between them.

Step 2: Add HTML Markup

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

In your HTML document, you’ll need to add elements that will display the individual images from the sprite. Typically, you’ll use HTML elements like <div> or <span> for this purpose. Here’s an example:

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

Step 3: Define CSS Classes

在你的 CSS 文件/样式标签（内联样式）中，为每个使用精灵图片的元素定义类。你将 background-image 设置为精灵图片，并指定 background-position 以显示精灵所需的部件。以下是一个示例：

In your CSS file / style tag (inline styling), define classes for each element that uses the sprite image. You’ll set the background-image to your sprite image and specify the background-position to display the desired part of the sprite. Here’s an example:

.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) 表示精灵中所需的图像位置。通过调整这些值，您可以精灵中显示不同的图像。

In the above example, the background-position property is used to specify which part of the sprite image to display. The values (-16px, -16px) represent the position of the desired image within the sprite. By adjusting these values, you can display different images from the sprite.

Step 4: Use The Sprites In HTML

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

You can now use the CSS classes you defined in your HTML elements to display the individual images from the sprite:

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

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

Repeat this process for each element that needs to display an image from the sprite.

CSS Image Sprites - Basic Example

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

The following example demonstrates how to use CSS image sprites to display multiple images from a single image file.

<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

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

The following example demostartes how to use image sprites to create a hover effect where the images become slightly transparent when you hover over them −

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