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

48次阅读

共计 385 个字符，预计需要花费 1 分钟才能阅读完成。

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

效果图：

原图:

正文完