有时候会遇到使用背景图还是图片的问题。
- 背景图：固定不变的内容，需要使用div标签来包裹内容
- 图片：img 标签的 src 属性值时后端给的。一般用于可变的（如头像），可点击的。
一般来说，使用到背景图片，会涉及到如下 CSS 样式：
- background-image: url();/背景图的路径/
- background-position: left top | center;/偏移位置/
- background-size: contain | cover | width height;/背景图尺寸/
cover:图片完全覆盖容器（图片可能溢出）。
contain:容器包裹图片（图片可能无法完全覆盖容器）。
background-size: 100px 80px;背景图宽度100px，高度80px - background-repeat: no-repeat | repeat-x | repeat-y;/背景图重复性/
- background-attachment: fixed | scroll; 规定背景图像是否固定或者随着页面的其余部分滚动。
CSS sprite 雪碧图
在线制作雪碧图
因为一个图片作为logo或者icon展示时，每一个url，会在页面渲染时发送一条网络请求（浪费网络资源），所以把这个较小的logo放在同一张图片上，再通过background-position来进行定位。（这样就只发送一次请求）。
background-position 使用时和 margin 类似。top使用负值可以把背景图上拉。
最后，还有一种减少网络请求的方式：把小图标转换为based64的字符。（图片---->数据，实时性好一些）
