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

效果图：

原图: