一 简单区分
背景图片会等到html结构加载完成才开始加载
img标签是网页结构的一部分，会在html结构加载的时候加载
当加载失败时，
背景图片在加载失败或路径找不到时，不会显示图片标记，
img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记
二 何时用img，何时用背景图
1>使用img
作为html结构内容的一部分
展示从后台传过来的数据
对图片进行缩放操作
利于搜索引擎搜索时
2>使用背景图
不是html结构的一部分
图像代替文本使用时
缩短下载时间时
为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)
所谓数据图就是从后台获取的图片，一般就用img标签显示，其他的图片一般就作为背景图展示
三 img标签日常使用场景
图片缩放
可以使用rem布局页面，给盒子定一个固定宽度，盒子下面的img标签给宽度100%
（即给父盒子固定的rem宽度（宽跟图片宽一致），子级img标签宽度100%继承父级宽度即可）
这样可以解决图片在页面放大缩小的时候 图片等比缩放，并且保证盒子之间的间距不变
注意给img标签如下使用，会出现盒子与盒子之间的间距被侵占或者间隔变大
img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
四 css背景图片的属性
背景类属性（css2的5个 css3 新增3个）
css 2
background-color：背景颜色
background-image：url（“图片路径”）背景图片的路径
background-repeat：no-repeat； 背景图片的平铺方式
background-position：center center 背景图片的定位
background-attachment：fixed 背景图片是否滚动
fixed ：背景图片相对于窗体固定
scroll ：背景图片相对于元素固定 ，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
复合：background：#000 url（） no-repeat center center fixed
五个值，位置没有要求
补充
background-repeat:no-repeat; 图片不平铺
:repeat; 平铺/默认值
:repeat-x; x轴/水平方向平铺
:repeat-y; y轴/垂直方向平铺
背景颜色要写在背景图片属性连写后面 因为背景属性连写会有默认的背景颜色**
注意背景颜色有三种表示方法，其中rgba可以表示透明度
/* 透明第一种写法: */
background-color:rgba(255,0,0,0.2);
/* 透明第二种写法: */
background-color: rgb(255,0,0 );
opacity: 0.2;
rgba()透明度不会透明内容
opacity会透明内容
css 3
background-size：cover；背景尺寸
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
contain ：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
auto ：背景图像的真实大小
percentage：用百分比指定背景图像大小，不允许负值
width值/height值
background-clip 背景裁减
padding-box： 从padding区域（不含padding）开始向外裁剪背景。
border-box： 从border区域（不含border）开始向外裁剪背景。
content-box： 从content区域开始向外裁剪背景。
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩
background-origin 背景显示的原点
padding-box： 从padding区域（含padding）开始显示背景图像。
border-box： 从border区域（含border）开始显示背景图像。
content-box： 从content区域开始显示背景图像。
