首先需要明确img标签和背景图片background-image的概念
img标签
<img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" />
img标签虽然是行内元素(具体可参考MDN文档developer.mozilla.org/zh-CN/docs/…) ，但是可以设置宽高，占位，
img设置width后height会自适应匹配，如果设置height后width会自适应匹配,如果同时设置width，height，img图片可能会变形
background-image
它是css的一个样式，并不占位，可以结合background-size,background-repeat,background-position等属性来设置图片位置，大小等
它所在的元素必须指定height，否则背景图片显示不出来，可以不指定width，如果不指定width，它的宽度则继承父元素的宽度
那么,img标签和背景图片background-image之间的区别呢
本质区别
img是html标签,占位,background-image是CSS样式,不占位- 所以
img是document对象,可以进行DOM操作(比如：从document对象中删除)，background-image是不能操作的
加载问题
img是html结构的一部分,会在html结构加载的时候加载background-image会等到html结构加载完成才开始加载- 如果你用引入了一个很大的图片，那么在这个图片下载完成之前，
img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。(即，img是内容性的，背景图是修饰性的)
加载失败显示问题
- 背景图片在加载失败时,不会显示图片标志
img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记
img和background-image的使用场景
img使用场景
- 作为html结构内容的一部分
- 展示从后台传过来的数据
- 对图片进行缩放操作
- 利于搜索引擎搜索时
- 有明确的语义化要求
- 图片作为页面的组成部分而不是修饰部分
- 显示图片只给定宽或高且不能截断图片，并且保证图片宽高比
background-image的使用场景
- 不是html结构的一部分
- 图像代替文本使用时
- 缩短下载时间时
- 为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)
- 作为背景图片
- 禁止用户保存图片(点击鼠标右键另存为操作)
- 允许图片拉伸，平铺，截取等情况
