img vs background-img

此为整合转载文章，荣耀归于原作者！！！！

• 论：img和background-image的各种区别
• When to use IMG vs. CSS background-image?

---

本质:

• img:
  HTML标签，块状元素

• background-img：
  css3样式

网页加载

• img
  图片在网页加载过程中加载

• background-img
  网页内容全部加载完成后才会加载，适合大图加载

• img加载在前，background-img加载在后

内容

• img
  与文字内容相关

• background-img
  修饰性图片

• 就是说如果网页css样式没加载出来，第一种类型的图片会显示但是第二种类型的图片不会，所以说如果图片是页面必不可缺的部分的话则使用第一种，也就是 img 标签

打印

• 使用img
  如果你打算让别人打印你的网页，同时你希望这个图片默认被包括在内*（注：浏览器的默认设置里并不会经常包括打印背景图片）

设备识别

• 使用img（包括alt内容）
  当图片含有重要的语义，比如一个警告图标。这确保其意义可以传达给所有的用户代理（user-agent），包括屏幕阅读器（screen readers）。