CSS Sprite

CSS Sprite

CSS Sprite也被称为CSS雪碧图，就是把网页上的一些背景图片整合到一张图片上，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位

优点：将图片拼接起来可以减少请求次数，提高网页的性能，合并后的图片相对于原图片的字节数较小

缺点：在合并图片的时候，需要合理的合并并且留好足够的空间，防止结果中出现了不必要的背景，在分辨率比较高的屏幕上自适应页面，如果图片不够宽，容易出现背景断裂；在维护的时候，如果页面出现了少许变动，则就需要改动这张图

下面看一个例子：

页面结构：

<ul>                                                                  
  <li><span class="icon icon-zfywxkz">支付业务许可证</span></li>           
  <li><span class="icon icon-pcirz">PCI认证</span></li>                               
</ul>   

基本样式：

ul li {
  list-style: none;
  display: inline-block;
}
.icon {
  display: inline-block;
  text-indent: -999px;
  margin-right: 1.5rem;
  background: url(./cert.png)no-repeat;
  background-size: 466px 477px;
  overflow: hidden;    /*将多余部分隐藏*/
}
.icon-zfywxkz {
  width: 38px;
  height: 31px;
  background-position: -369px -45px; 
  /*关于这里的值为什么是负数？相对于向右，向下移动，所以取负数*/
}
.icon-pcirz {
  width: 80px;
  height: 35px;
  background-position: -110px -96px;
}

使用的CSS Sprite样图可以在https://i.alipayobjects.com/e/201307/jebmKcbrh.png中查看

上面示例的结果如下：