img标签图⽚与图⽚背景的区别和使⽤场景
1.img
<img src="图⽚来源" alt="图⽚⽆法显⽰时显⽰图⽚说明性⽂字" />
img标签虽然不是块状元素，但是可以设置宽⾼，占位，
img设置width后height会⾃适应匹配，如果设置height后width会⾃适应匹配，如果同时设置width，height，img图⽚可能会变形
2.background-image
它是css的⼀个样式，并不占位，可以结合background-size,background-repeat,background-position等属性来设置图⽚位置，⼤⼩等
它所在的元素必须指定height，否则背景图⽚显⽰不出来，可以不指定width，如果不指定width，它的宽度则继承⽗元素的宽度
3.它们之间的不同
img是html标签，占位，background-image是CSS样式，不占位
img是document对象可以操作(⽐如：从document对象中删除)，background-image是不能操作的
在⽹页加载过程中，img作为⽹页结构内容的⼀部分，会在加载结构的过程中加载，⽽background-image作为css样式的⼀部分，会在结构加载完成后开始加载。(如果你引⼊了⼀个很⼤的图⽚，在这个图⽚下载完成之前，img后⾯的内容都不会显⽰，⽽如果⽤css引⼊同样的图⽚，⽹页结构和内容加载完成之后，才开始加载背景图⽚，不会影响你浏览⽹页内容。)
img标签点击会选中或放⼤图⽚，background-image则不会
4.加载问题
背景图⽚会等到html结构加载完成才开始加载
img标签是⽹页结构的⼀部分，会在html结构加载的时候加载
在⽹页加载的过程中，背景图⽚会等到结构加载完成（⽹页的内容全部显⽰以后）才开始加载，⽽img标签
是⽹页结构（内容）的⼀部分会在html结构加载的过程中加载，换句话讲，⽹页会先加载img标签的内容，
再加载背景图⽚，如果你⽤引⼊了⼀个很⼤的图⽚，那么在这个图⽚下载完成之前，img后的内容都不会显
⽰。⽽如果⽤css来引⼊同样的图⽚，⽹页结构和内容加载完成之后，才开始加载背景图⽚，不会影响你浏
览⽹页内容。(即，img是内容性的，背景图是修饰性的)
5.加载失败显⽰问题
背景图⽚在加载失败或路径不到时，不会显⽰图⽚标记，
img标签在加载失败或不到路径时，会显⽰⼀个撕裂的⼩图标标记
6.数据图与⾮数据图
所谓数据图就是从后台获取的图⽚，⼀般就⽤img标签显⽰，其他的图⽚⼀般就作为背景图展⽰
7.何时⽤img，何时⽤背景图
1》使⽤img
position标签属性
作为html结构内容的⼀部分
展⽰从后台传过来的数据
对图⽚进⾏缩放操作
利于搜索引擎搜索时
有明确的语义化要求
图⽚作为页⾯的组成部分⽽不是修饰部分
显⽰图⽚只给定宽或⾼且不能截断图⽚，并且保证图⽚宽⾼⽐
2》使⽤背景图
不是html结构的⼀部分
图像代替⽂本使⽤时
缩短下载时间时
为不同的屏幕分辨率展⽰不同的图像时(media查询时使⽤背景图)
作为背景图⽚
禁⽌⽤户保存图⽚(点击⿏标右键另存为操作)
允许图⽚拉伸，平铺，截取等情况
另论：记录下background-size:100% 100% 与background-size:cover之间的区别background-size:100% 100%；按容器⽐例撑满，图⽚会变形
background-size:cover；把背景图⽚放⼤到适合元素容器的尺⼨，图⽚⽐例不变

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。