给img设background-color无效，因其是替换元素且常无尺寸；应设在有宽高或aspect-ratio的块级容器上，并用css变量配合prefers-color-scheme适配主题，再通过requestanimationframe+transition实现平滑淡入。
直接用 background-color 在移动端做懒加载占位色块，行不通——除非你把它写在容器上，且容器有稳定尺寸。
为什么给 img 标签设 background-color 没反应
因为 img 是替换元素，浏览器默认不渲染它的背景，尤其在未加载完成、宽高为 0 或仅剩基线高度时。background-color 根本没地方画。你看到的“空白”，就是这个机制的结果。
- 写了
img { background-color: #eee; }却没效果，大概率是父容器没设display: block或aspect-ratio，导致img高度塌陷 - 在 Flex/Grid 容器里，忘了加
align-items: stretch，img就不会撑满高度 - 即使加了
width/height，如果父级是inline显示，依然会塌
必须用块级容器包裹，并设尺寸或比例
移动端响应式强，推荐优先用 aspect-ratio 预留空间，比老式 padding-top hack 更可靠、可继承。
- 容器（如
div）需设display: block、width: 100%、aspect-ratio: 16 / 9 -
background-color必须写在该容器上，不是img上 - 若后端图比例不固定，得用 JS 动态注入
style="--aspect-ratio: X/Y"，纯 CSS 无法推导 - Android WebView 和 iOS Safari 对
aspect-ratio支持良好（2026 年已全覆盖）
background-color 如何适配深色模式与主题切换
硬写 #f0f0f0 会翻车：系统切深色模式、换主题、组件复用时全得手动改。关键不是“能不能显示”，而是“能不能自动响应”。
- 声明 CSS 变量：
:root { --placeholder-bg: #f0f0f0; }，或组件级:host { --placeholder-bg: #f0f0f0; } - 用
@media (prefers-color-scheme: dark)重设变量值，浏览器原生触发，不用 JS 监听 - 容器样式统一用
background-color: var(--placeholder-bg)，别加!important——它会阻断变量解析 - 如果图片主色已知（如通过
color-thief提前提取），可设--placeholder-bg: #4a6fa5，比灰更自然
过渡动画为何“啪”一下跳变，而不是淡入
常见现象：JS 加了 .loaded 类，背景却瞬间消失。这不是 transition 写错了，而是浏览器没机会执行重绘链。
- JS 设置 class 后立即应用新样式（如
background-color: transparent），中间没留出 layout 触发时机 - 正确做法是包一层
requestAnimationFrame(() => el.classList.add('loaded'))，确保变更在下一帧 - 如果用
background-image做占位（比如渐变），transition对它无效——只能切opacity或visibility - 别漏
will-change: background-color，尤其在安卓 WebView 下，能避免重绘卡顿
真正难的不是写对一行 background-color，而是让这个颜色在各种设备、主题、加载状态、失败场景下都保持一致且不闪。变量 + 媒体查询 + 容器尺寸控制，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
