关于css3:CSS雪碧图基本使用流程

雪碧图通过 CSS 背景定位的办法显示图片局部，缩小了加载图片的申请，进步网页速度。

根本步骤是

1. 首先创立一个 DOM 标签
2. 给 DOM 设置 宽 高
3. 而后通过 background-image:url(图片地址) 的办法导入雪碧图
4. 在通过 background-position:x 轴 (程度) y 轴 (垂直) 找到图片所在的地位 即可

案例：

// 创立 dom
  <i class="water"></i>

// css

 .water {
           display: inline-block;
           width: 18px;
           height: 30px;
           background-image: url(/src/assets/Icon.png);
           background-position: -470px -286px;
           vertical-align: middle;
           position: relative;
           top: -3px;
           margin-right: 10px;
     }

效果图：

原图: