CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
作用：
作用：background-size设置 背景图像的大小尺寸 。
一、margin和width实现水平居中
优点： 实现方法简单易懂，浏览器兼容性强；
缺点： 扩展性差，只能针对已知宽度的div，无法自适应未知项情况。
)
二、inline-block实现水平居中方法
做点： 简单易懂，扩展性强；
缺点： 需要额外处理inline-block的浏览器兼容性。
1）、opacity作用于元素以及元素内的 所有内容的透明度 ，子元素会继承父元素的 opacity 属性。
2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。
CSS Sprites 因其英文被称为 雪碧图 。
主要用于把一堆小图标整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。
1、 减少网页的HTTP请求，提高页面性能
2、减少图片命名的困扰
1、需要计算每个图片的位置
2、后期维护困难
通过设置每个 <i></i>对应的 background-position 来展现不同位置的图标。
其中第一个参数代表x轴控制左右，第二个参数代表y轴控制上下。
默认情况下为
当设置x为负数，相当于固定展现框不动，图片向左侧移动，展现的是相对右侧的内容。同理当y为负数，图片向上侧移动，展现的是相对下方的内容。
雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。
使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。
显示雪碧图的条件：
1）需要一个设置好宽和高的容器
2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。
为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。
在处理sprite图片时，我们只能给background-size取具体值。那么这个值取多少呢？其实只要写我们切出来的图片的实际尺寸就行。
比如我们的元素为5050px，sprite图片为200px 50px，那css应该如下：
需要引用的雪碧图如下
https://www.toptal.com/developers/css/sprite-generator
