img 的 background-color 在移动端懒加载下无效，因其是替换元素且无尺寸时背景不渲染；需用 aspect-ratio 预留空间防布局抖动，并配合 display: block、width: 100% 及 css 变量适配深色模式。
直接给 img 设 background-color 或动画，在移动端懒加载场景下基本无效——因为 img 是替换元素，没尺寸时背景根本画不出来。
为什么 img 的 background-color 总是不显示
浏览器对替换元素（如 img、iframe）的背景渲染有特殊规则：当它没有明确宽高、或尚未加载、或父容器未撑开空间时，background-color 不会被绘制。你看到的“空白”，其实是渲染逻辑跳过了背景层。
- 常见失效组合：
img { background-color: #eee; }+ 父容器display: inline或没设width - Flex/Grid 容器里，
img默认不拉伸高度，必须显式加align-items: stretch或设height: 100%（但后者会破坏响应式） - 真正能生效的位置，是包裹
img的块级容器，且该容器必须有可计算的宽度和比例依据
用 aspect-ratio 预留空间才真正防抖动
布局抖动（CLS）不是动画问题，而是图片加载前后容器高度突变导致的。解决核心不是“怎么动”，而是“提前占好位”。aspect-ratio 是目前最轻量、最可靠的方案。
- 必须配合：
display: block（或inline-block）、width: 100%（或固定值），否则比例无法推导出高度 -
img自身设width: 100%; height: auto;，避免拉伸；不要设height: 100%，否则在断点切换时会失真 - 后端图比例不固定？纯 CSS 搞不定，得用 JS 动态写
style="--aspect-ratio: X/Y"，再由容器读取变量 - Android WebView 和 iOS Safari 对
aspect-ratio支持已全覆盖（2026 年起）
深色模式适配不能硬编码颜色
写死 #f0f0f0 在深色主题下会变成刺眼灰块，而且组件复用时极易漏改。关键不是“设颜色”，而是“让颜色随系统自动切换”。
- 统一声明 CSS 变量：
:root { --placeholder-bg: #f0f0f0; }，或组件级:host { --placeholder-bg: #f0f0f0; } - 用原生媒体查询重置：
@media (prefers-color-scheme: dark) { :root { --placeholder-bg: #333; } }，无需 JS 监听 - 容器上写
background-color: var(--placeholder-bg)，别加!important——它会阻断变量继承 - 如果已知图片主色（比如通过
color-thief提前提取），可设--placeholder-bg: #4a6fa5，比通用灰更自然
淡入动画“啪”一下就没了，不是 transition 写错了
JS 给 img 加 loaded 类后背景瞬间消失，通常不是 CSS 写错，而是浏览器没机会完成重绘链——样式变更和重排被压在同一帧里了。
- 正确做法：包一层
requestAnimationFrame(() => el.classList.add('loaded'))，确保类名变更发生在下一帧 - 别用
visibility: hidden替代opacity: 0，前者会让元素脱离渲染流，父容器高度塌陷 - 如果用伪元素做加载动画（如条纹扫光），
background-position比transform更稳，避免触发布局重排 - 过渡时间建议控制在
0.2s–0.3s，太长用户感知迟钝，太短像没动
最容易被忽略的是：aspect-ratio 必须依赖父容器宽度才能生效，而很多响应式布局里，父容器宽度来自 max-width 或 flex-basis，这些值在某些条件下不可计算——这时 aspect-ratio 就静默失效了，得回退到 padding-top hack 或 JS 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
