CSS Sprite（雪碧图）的使用

什么是雪碧图？

其实实质就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

为什么要使用？

使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

简单来说，减少了http请求，优化了浏览器的访问速度

如何使用？

1、设置好一个宽和高固定且整齐（数值恰当）的容器
2、设置图片路径为同一个png图片
2、针对每一个元素进行调整，需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

实践操作：

图片的宽为40px，高为120px，且为png图片；
位置数据解释：我们在一个页面上设置了盒子的宽高，想要将一个表情显示在盒子内，我们是不能移动盒子的位置的，我们只能改变图片的位置。比如我想显示下面表情

将图片向左移X个单位，然后向上移Y个单位，其中XY的具体数值是需要个人调试至合适位置得出的！

代码为：background-position：-xpx -ypx;

最终效果如下：

html部分代码:

 <p class="text">
    <a class="icon1" href="javascript:;">7天无理由退换货</a>
    <a class="icon2" href="javascript:;">满99元全场免邮</a>
    <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
</p>

.footer .ng-promise-box .ng-promise p a {
  color: #fff;
  font-size: 20px;
  margin-right: 210px;
  padding-left: 44px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-decoration: none;
  background: url("./assets/imgs/us-icon.png") no-repeat left;
}
.footer .ng-promise-box .ng-promise p .icon1 {
  background-position: 0 0;
}
.footer .ng-promise-box .ng-promise p .icon2 {
  background-position: 0 -40px;
}
.footer .ng-promise-box .ng-promise p .icon3 {
  background-position: 0 -80px;
}