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中查看

上面示例的结果如下：