css背景图片与img标签的区别梳理

一 简单区分

背景图片会等到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轴/垂直方向平铺

image.png

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

注意背景颜色有三种表示方法，其中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区域开始显示背景图像。