img元素可设background-color，但必须显式设置width/height（或aspect-ratio）并设display:block，否则因默认inline且无尺寸，背景区域为0×0而不可见。
img 元素本身能设 background-color，但必须搭配尺寸控制才可见；不设宽高或不脱离 inline 流，背景色根本不会渲染出来。
为什么直接给 img 设 background-color 常常没反应
因为 img 默认是 display: inline，没有固有宽高，行内元素的 background 区域为 0×0——颜色没地方画。即使写了 style="background-color: #eee;"，也看不到任何效果。
- 缺
width和height：背景区域面积为 0，不可见 - 没加
display: block或inline-block：上下可能留白，背景被行高“切开”，显示不完整 - 误用
bgcolor属性：bgcolor是过时的 HTML 属性，对img标签完全无效 - 指望父容器背景“透”过来：
img不继承父级background-color，也不会让父背景“漏”到自身区域
img 加载失败时如何稳定显示背景色
现代浏览器在图片加载失败时会显示内置占位符（带叉图标），此时只要 img 有固定尺寸 + background-color，背景色就能正常兜底。
- 必须显式设置
width和height（或用aspect-ratio+width） - 推荐加
display: block，避免 inline 下的基线对齐和空白间隙 - 错误写法：
<img src="x.jpg" style="max-width:90%">→ 无宽高，背景不可见 - 正确写法：
<img src="x.jpg" style="max-width:90%">
想兼容加载中 + 加载失败 + 响应式怎么办
纯 CSS 方案无法监听加载状态，但可通过容器包裹 + 背景图 fallback 实现更鲁棒的占位：
- 用
div容器设background-color和/或模糊缩略图（base64），再把img叠在其上 -
img自身设opacity: 0+transition，监听load事件后设opacity: 1 - 监听
error事件时，可改img.src为 fallback 图，或直接移除img显示容器背景 - 懒加载场景下，
loading="lazy"与decoding="async"可辅助控制时机，但不能替代尺寸和背景声明
img 是否拥有可绘制的几何区域**。哪怕 src 是空字符串或 404，只要宽高+display 设置到位，background-color 就稳稳显示在那里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
