1、雪碧图

css sprite也叫css精灵图、css雪碧图，是一种网页图片应用处理方式，它允许你将一个页面所涉及到的所有零星图片都包含到一张大图中去，然后通过定位显示出你要的小图片出来。
优点：
减少图片字节
减少网页的http请求
缺点：
通过background-image引入图片
需要通过background-position把背景图片移动到自己需要的位置，比较麻烦。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6.     <title>CSS3新特性-雪碧图</title>
  8.     <style>
  9.         .icon1{
  10.             /* 把内联元素定义为块级元素 */
  11.             display: block;
  12.             background-image: url(./1.png);
  13.             background-position: -20px -10px;
  14.             width: 45px;
  15.             height: 70px;
  16.             border: 1px solid red;
  17.         }
  18.         .icon2{
  19.             /* 把内联元素定义为块级元素 */
  20.             display: block;
  21.             background-image: url(./1.png);
  22.             background-position: -92px -86px;
  23.             width: 45px;
  24.             height: 70px;
  25.             border: 1px solid red;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  31.     <span class="icon1"></span>
  32.     <span class="icon2"></span>
  34. </body>
  35. </html>

原png图：
image.png
代码效果图：
image.png