什么是 CSS 精灵图?如何在页面上实现它们?

cssweb developmentfront end technology更新于 2024/5/21 9:48:17

CSS 中的精灵图是什么?

在 CSS 中，精灵图是一种用来减少 Web 浏览器 HTTP 请求数量的技术。使用这种技术，我们需要将多张图片合并成一张图片。之后，我们可以为每个图片元素的背景设置这张图片，并设置合并后图片中特定图片的显示位置。

在这里，我们可以使用 Photoshop、Paint 等图像编辑工具将不同的图片合并成一张图片。之后，我们可以使用该图片，并设置不同的背景位置，在网页上显示不同的图片。

为什么要使用精灵图?

使用 CSS 精灵图的主要好处是它可以减少 HTTP 请求的总数。此外，浏览器只需下载单张图片，而不是下载多张图片，从而节省了网页的带宽。

因此，它节省了带宽，从而提高了网页的加载速度和性能。

让我们通过不同的示例了解如何使用 CSS 精灵。

示例 1

在下面的示例中，我们选取了 TutorialPoint 网站的徽标图片。它包含 art 格式的"t"和文本格式的"tutorialspoint"。

在这里，我们将徽标图标和文本与单张图片分开显示。我们有两个名为 first 和 second 的 div 元素，我们为这两个 div 元素设置了不同的尺寸，并使用了相同的背景图片。之后，我们设置了背景位置，将徽标图标和文本显示为不同的图片。

<html>
<head>
   <style>
      .first {
         width: 70px;
         height: 69px;
         background: url('https://www.cainiaomax.com/static/images/logo.png?v2') 0 0 no-repeat;
         background-position: -10px 7px;
      }
      .second {
         margin-top: 20px;
         width: 270px;
         height: 69px;
         background: url('https://www.cainiaomax.com/static/images/logo.png?v2') 0 0 no-repeat;
         background-position: -78px 7px;
      }
   </style>
</head>   
<body>
   <h3> Using the <i> CSS sprites </i> to use the multiple images from single combined images </h3>
   <h4> The original image is as shown below. </h4>
   <img src = "https://www.cainiaomax.com/static/images/logo.png?v2" alt = "logo">
   <h4> After dividing the image into two halves. </h4>
   <div class = "first"> </div>
   <div class = "second"> </div>
</body>
</html>

示例 2

在本例中，我们拍摄了一张包含 5 张不同自然风光图片的组合图像。我们创建了一个图库，用于展示不同的图片，并在"gallery"div 元素内添加了多个 div 元素。

在 CSS 中，我们为每个 div 元素设置了尺寸，并设置了相同的组合背景图片。之后，我们使用"background-position"属性调整了背景图片的位置，使其分别显示每张图片。

<html>
<head>
   <style>
      img {
         width: 200px;
         height: 200px;
      }
      .gallery {
         display: flex;
         flex-wrap: wrap;
         height: 1000px;
         justify-content: space-around;
      }
      .image1 {
         width: 300px;
         height: 300px;
         background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
         background-position: 0px 0px;
      }
      .image2 {
         width: 300px;
         height: 300px;
         background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
         background-position: -560px 0px;
      }
      .image3 {
         width: 300px;
         height: 300px;
         background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
         background-position: -10px -500px;
      }
      .image4 {
         width: 300px;
         height: 300px;
         background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
         background-position: -300px -500px;
      }
      .image5 {
         width: 300px;
         height: 300px;
         background: url('https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924') 0 0 no-repeat;
         background-position: -600px -500px;
      }
   </style>
</head>
<body>
   <h3> Using the <i> CSS sprites </i> to use the multiple images from single combined images </h3>
   <h4> The original image is as shown below. </h4>
   <img src = "https://ik.imagekit.io/yh6p80x6v/combined.jpg?updatedAt=1682083194924" alt = "nature">
   <h4> After implementing the CSS sprites. </h4>
   <div class = "gallery">
      <div class = "image1"> </div>
      <div class = "image2"> </div>
      <div class = "image3"> </div>
      <div class = "image4"> </div>
      <div class = "image5"> </div>
   </div>
</body>
</html>

示例 3

在这里，我们将所有社交媒体图标组合到一张图片中。之后，我们创建了一个无序列表来显示组合图片中的所有社交媒体图标。在列表中，我们添加了"<a>"标签，并在其中使用了"div"元素，该元素将社交媒体图标作为背景。

在 CSS 中，我们必须首先为每个图标指定一些尺寸。此外，我们还设置了背景图片的尺寸。此外，我们还设置了背景位置，以便分别显示每个社交媒体图标。

在输出中，用户可以点击任何社交媒体图标，它将重定向到相应的网页。

<html>
<head>
   <style>
      img {
         width: 500px;
         height: 300px;
      }
      .social {
         display: flex;
         flex-wrap: wrap;
         width: 450px;
         justify-content: space-around;
      }
      .facebook,
      .instagram,
      .twitter,
      .linkedin,
      .youtube,
      .whatsapp,
      .tiktok {
         width: 100px;
         height: 100px;
         background: url('https://static.vecteezy.com/system/resources/previews/003/600/947/original/set-of-social-media-icon-in-round-bakground-free-vector.jpg') 0 0 no-repeat;
         background-size: 400px 300px;
      }
      .facebook { background-position: 0px -38px;}
      .instagram { background-position: -95px -35px;}
      .twitter {background-position: -190px -35px;}
      .linkedin {background-position: -280px -165px;}
      .youtube {background-position: 0px -165px;}
      .whatsapp {background-position: -190px -160px;}
      .tiktok {background-position: -280px -38px;}
      ul {display: flex; flex-wrap: wrap;justify-content: space-around;}
      li {list-style: none;}
   </style>
</head>
<body>
   <h3> Using the <i> CSS sprites </i> to use the mutiple images from single combined images </h3>
   <h4> The original image is as shown below. </h4>
   <img src = "https://static.vecteezy.com/system/resources/previews/003/600/947/original/set-of-social-media-icon-in-round-bakground-free-vector.jpg" alt = "Social media icons">
   <h4> After implementing the CSS sprites. </h4>
   <div class = "social">
      <ul>
         <li> <a href = "https://www.facebook.com/">
               <div class = "facebook"> </div>
            </a>
         </li>
         <li> <a href = "https://www.instagram.com/">
               <div class = "instagram"> </div>
            </a>
         </li>
         <li> <a href = "https://www.twitter.com/">
               <div class = "twitter"> </div>
            </a>
         </li>
         <li> <a href = "https://www.linkedin.com/">
               <div class = "linkedin"> </div>
            </a>
         </li>
         <li> <a href = "https://www.youtube.com/">
               <div class = "youtube"> </div>
            </a>
         </li>
         <li>
            <a href = "https://www.whatsapp.com/">
               <div class = "whatsapp"> </div>
            </a>
         </li>
         <li>
            <a href = "https://www.tiktok.com/">
               <div class = "tiktok"> </div>
            </a>
         </li>
      </ul>
   </div>
</body>
</html>

用户学习了如何使用 CSS 精灵图从一张组合图片中显示多张图片。主要原因是，我们应该使用 CSS 精灵图来提升网页性能，因为我们只需要下载一个大文件，而不是多个单个文件。在第二个示例中，我们创建了一个图库，但用户也可以使用相同的技术创建图片的幻灯片。