背景图片会等到html结构加载完成才开始加载 img标签是网页结构的一部分，会在html结构加载的时候加载

当加载失败时， 背景图片在加载失败或路径找不到时，不会显示图片标记， img标签在加载失败或找不到路径时，会显示一个撕裂的小图标标记

1>使用img

作为html结构内容的一部分 展示从后台传过来的数据 对图片进行缩放操作 利于搜索引擎搜索时

2>使用背景图

不是html结构的一部分 图像代替文本使用时 缩短下载时间时 为不同的屏幕分辨率展示不同的图像时(media查询时使用背景图)

所谓数据图就是从后台获取的图片，一般就用img标签显示，其他的图片一般就作为背景图展示

图片缩放 可以使用rem布局页面，给盒子定一个固定宽度，盒子下面的img标签给宽度100% （即给父盒子固定的rem宽度（宽跟图片宽一致），子级img标签宽度100%继承父级宽度即可） 这样可以解决图片在页面放大缩小的时候 图片等比缩放，并且保证盒子之间的间距不变

注意给img标签如下使用，会出现盒子与盒子之间的间距被侵占或者间隔变大

背景类属性（css2的5个 css3 新增3个）

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轴/垂直方向平铺

背景颜色要写在背景图片属性连写后面 因为背景属性连写会有默认的背景颜色**

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区域开始显示背景图像。