雪碧图通过CSS背景定位的办法显示图片局部,缩小了加载图片的申请,进步网页速度。
根本步骤是
- 首先创立一个DOM标签
- 给DOM设置 宽 高
- 而后通过
background-image:url(图片地址)
的办法导入雪碧图 - 在通过
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; }
效果图:
原图: