雪碧图通过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;     }

效果图:

原图: