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

效果图：

原图: