两者都能显示图片，但在其余几乎所有要紧的方面都不同。
判断规则
- 内容 → img 元素。 如果图片传达了用户需要的信息——商品照片、图表、文章插图、标识站点身份的 logo——它就属于标记。
- 装饰 → CSS 背景。 如果去掉它除了视觉精致度之外什么都不损失——纹理、渐变遮罩、重复图案、文字背后的首屏底图——CSS 才是它的归宿。
下面几乎所有论据都由此推出。
内容为什么该用 img
- 无障碍：img 支持 alt 文本。CSS 背景对读屏软件是隐形的，除非你加 ARIA 变通方案，而那很容易做错。
- SEO：写在标记里的图片有资格被图片搜索收录，CSS 背景通常不行。
- 性能：浏览器的预加载扫描器能在原始 HTML 里立刻发现 img 的 src。CSS 背景要等样式表下载解析、且元素匹配之后才会被发现——这正是把首屏图放进 CSS 会损害 LCP 的原因。
- 响应式：img 原生支持 srcset 和 sizes，让浏览器挑选合适的文件。CSS 需要 image-set 或媒体查询来近似实现。
- 原生懒加载和优先级提示对 img 有效，对 CSS 背景无效。
- 右键、保存、分享的行为符合用户预期。
CSS 背景仍然有用的地方
- 轻松裁切与定位：background-size 和 background-position 不需额外标记就能实现 cover 效果。（不过 object-fit 现在也给了 img 同样的能力。）
- 重复图案和平铺，这是 img 做不到的。
- 在同一元素上叠加多层背景和渐变。
- 仅靠 CSS 按断点或主题切换图片，包括深色模式变体。
- 文字压在图上，无需复杂的定位技巧。
中间地带
现代 CSS 从两个方向缩小了差距：
- 给 img 加 object-fit: cover 就能复现经典的背景铺满效果，同时保留 img 的全部优势。对于叠加文字的首屏图，这已是推荐做法。
- image-set() 把分辨率切换带给了 CSS 背景。
- 首屏最强的写法，是一个带 object-fit 和 fetchpriority="high" 的 img，配合绝对定位的文字压在其上。
快速检查
- 图片没了，视障用户会不会错过信息？→ 用 img 并写 alt。
- 把图片完全移除，页面是否依然说得通？→ 用 CSS。
- 它是屏幕上最大的元素吗？→ 写进 HTML 的 img，立即加载并提升优先级。
- 需要重复或叠层吗？→ 用 CSS。
放在 img 标签里的装饰性图片要写空的 alt 属性，让读屏软件跳过它——这条小小的附加规则，让"内容与装饰"的区分保持诚实。