img标签虽然不是块状元素,但是可以设置宽高,占位,
img设置width后height会自适应匹配,如果设置height后width会自适应匹配,如果同时设置width,height,img图片可能会变形
它是css的一个样式,并不占位,可以结合background-size,background-repeat,background-position等属性来设置图片位置,大小等
它所在的元素必须指定height,否则背景图片显示不出来,可以不指定width,如果不指定width,它的宽度则继承父元素的宽度
img是html标签,占位,background-image是CSS样式,不占位
img是document对象可以操作(比如:从document对象中删除),background-image是不能操作的
img标签点击会选中或放大图片,background-image则不会
背景图片会等到html结构加载完成才开始加载,img标签是网页结构的一部分,会在html结构加载的时候加载
在网页加载的过程中,背景图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而img标签
是网页结构(内容)的一部分会在html结构加载的过程中加载,换句话讲,网页会先加载img标签的内容,
再加载背景图片,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显
示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏
览网页内容。(即,img是内容性的,背景图是修饰性的)
背景图片在加载失败或路径找不到时,不会显示图片标记,
img标签在加载失败或找不到路径时,会显示一个撕裂的小图标标记
img使用场景:
背景图使用场景:
原文:https://www.cnblogs.com/bbldhf/p/14331734.html