直接写background-color: #f0f0f0会导致主题切换困难、深色模式不响应、组件复用性差，因该属性不支持条件逻辑，必须用CSS变量（如--placeholder-bg）配合@media (prefers-color-scheme: dark)实现自动适配。
为什么直接写background-color: #f0f0f0会出问题
颜色写死看似省事，但实际项目里很快就会翻车：换深色主题时得全局搜替换；用户开了系统深色模式，页面却还是亮色占位；组件复用时不同上下文需要不同占位色，硬编码根本没法维护。
关键不是“能不能显示”，而是“能不能随环境自动响应”。background-color本身不支持条件逻辑，必须靠 CSS 变量承接变化。
- 把占位色声明为
--placeholder-bg，放在:root或组件级:host作用域里 - 用
@media (prefers-color-scheme: dark)重设该变量值，浏览器原生触发，无需 JS 监听 - 容器样式统一用
background-color: var(--placeholder-bg)，别加!important——它会阻断变量解析
transition不生效的三个真实原因
常见现象是 JS 加了.loaded类，背景却“啪”一下消失，没有渐变。这不是 transition 写错了，而是浏览器没机会执行重绘链。
- JS 设置 class 后立即应用新样式（比如
background-color: transparent），中间没留出 layout 触发时机 - 正确做法是包一层
requestAnimationFrame(() => el.classList.add('loaded'))，确保样式变更在下一帧 - 如果用了
background-image做占位（比如 SVG 或渐变），transition对它完全无效——只能切opacity或visibility
图片加载完成时，如何让过渡自然不跳
过渡是否“自然”，取决于两件事：一是尺寸是否稳定，二是背景切换是否与图片渲染节奏同步。光有transition不够。
- 容器必须设固定
width/height或aspect-ratio，否则图片加载后会重排，transition 看不见 -
img标签初始设opacity: 0、position: absolute盖在占位容器上，避免影响布局流 - 监听
img.onload后，先移除占位类（触发 background-color 过渡），再设opacity: 1，用同一组transition: opacity 0.2s衔接 - 别漏
will-change: background-color，尤其在安卓 WebView 下，能避免重绘卡顿
深色模式下占位符颜色怎么自动适配
很多人用 JS 监听prefers-color-scheme然后手动改 CSS 变量，这既多余又容易漏掉动态插入的节点。浏览器早就支持原生响应。
- 在
:root里定义--placeholder-bg: #f0f0f0 - 紧接着写
@media (prefers-color-scheme: dark) { :root { --placeholder-bg: #333; } } - 所有用
var(--placeholder-bg)的地方会自动更新，包括已渲染和后续动态插入的元素 - 验证方法：打开浏览器开发者工具，勾选“Emulate CSS prefers-color-scheme”，看变量值是否实时变化
实际最易被忽略的是容器宽高稳定性——哪怕 transition 和变量都写对了，只要img没设display: block或容器没设aspect-ratio，加载瞬间的 layout shift 就会让整个过渡失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
