一、效果图

二、原图

三、思路

  1. 从效果图中看到九宫格，三行三列，每个icon为100*100px
  2. 设定容器container大小为300*300px，正好容纳下三行三列的九个icon
  3. 通过background-image和background-position中的x、y的位置，来展示原图中不同位置的图片
  4. 开发过程中注意根据效果展示来调整pos1,pos2,pos3的位置即可。

四、源代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>实现雪碧图效果</title>
  6.     <style>
  7.         .container {
  8.             width: 300px;
  9.             height: 300px;
  10.         }
  11.         .pos{
  12.             width: 320px;
  13.             height: 100px;
  14.         }
  15.         .pos1{
  16.             background-image: url("./images/sprite.jpg");
  17.             background-position: -11px, -8px;
  18.         }
  19.         .pos2{
  20.             background-image: url("./images/sprite.jpg");
  21.             background-position: -341px, -8px;
  22.         }
  23.         .pos3{
  24.             background-image: url("./images/sprite.jpg");
  25.             background-position: -671px, -8px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="container">
  31.         <div class="pos pos1"></div>
  32.         <div class="pos pos2"></div>
  33.         <div class="pos pos3"></div>
  34.     </div>
  35. </body>
  36. </html>