【html】使用img标签和背景图片之间的区别

1.加载问题

背景图片会等到html结构加载完成才开始加载

img标签是网页结构的一部分，会在html结构加载的时候加载

在网页加载的过程中，背景图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而img标签

是网页结构（内容）的一部分会在html结构加载的过程中加载，换句话讲，网页会先加载img标签的内容，

再加载背景图片，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显

示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏

览网页内容。(即，img是内容性的，背景图是修饰性的)

2.加载失败显示问题

背景图片在加载失败或路径找不到时，不会显示图片标记，

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

3.数据图与非数据图

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

4.何时用img，何时用背景图

1》使用img

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

2》使用背景图

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

 

相关资料：https://my.oschina.net/u/3680343/blog/1604073

作者：smile.轉角

QQ：493177502