直接给img设background-color无效，因其是替换元素且未加载时宽高常为0；必须用块级容器包裹并设width、aspect-ratio及background-color，推荐现代方案aspect-ratio:16/9配合渐变占位与opacity淡入。
为什么直接给 img 设 background-color 没效果
因为 img 是替换元素，未加载完成时宽高常为 0 或仅剩基线高度，background-color 根本没渲染空间。你看到的“空白”，其实是浏览器默认行为，不是样式失效。
真正起作用的是包裹它的块级容器——必须有明确尺寸或比例约束，才能让背景色稳定显示。
- 容器需设
display: block或inline-block - 必须声明宽度（如
width: 100%），否则aspect-ratio或padding-top无法推导高度 - 移动端优先用
aspect-ratio: 16 / 9，比老式padding-top更语义清晰、可继承 -
background-color必须写在容器上，不是img上
如何用 aspect-ratio 实现可靠占位（现代方案）
aspect-ratio 是解决懒加载布局抖动最轻量的方式：图片未加载时，容器仍按比例预留空间，后续内容不会上跳。
但只写 aspect-ratio 不够，必须配合以下组合才生效：
- 容器设
display: block（不能是默认inline） -
width: 100%或其他明确宽度值（max-width: 100%也要配width） -
img自身设width: 100%; height: auto;，禁用height: 100%（会破坏响应缩放） - 若父容器是
flex或grid，加align-items: stretch防止被压缩
示例：
.img-container {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background-color: #f5f5f5;
overflow: hidden;
}
.img-container img {
width: 100%;
height: auto;
object-fit: cover;
}
如何兼容 Safari ≤15.4（降级 fallback）
Safari ≤15.4 完全忽略 aspect-ratio，且对 padding-top 百分比计算不稳定——可能当 0 处理，导致容器塌成一条线。
安全降级必须同时满足：
- 容器设
position: relative; min-height: 0.01px;（防 Safari 忽略padding-top） -
padding-top: 56.25%（对应 16:9），并清掉旧版中可能残留的height或min-height -
img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 用
@supports (aspect-ratio: 1)包裹现代写法，老浏览器自动走padding-top方案
注意：padding-top 和 aspect-ratio 切换时，务必清掉对方的样式，否则高度可能翻倍。
渐变占位符动画怎么不卡、不闪
纯色背景加载时和真实图片对比太强，容易“啪”一下跳；用 linear-gradient 做细网格底纹更自然，也避免空白闪。
关键控制点：
- 动画只作用于容器伪元素（如
::before），真实img保持opacity: 0直到load事件 - 用
@keyframes控制opacity脉冲（0.6 → 0.85 → 0.6），周期 1.8s；禁用transform: scale()（触发 layout，滚动掉帧） - 必须加
will-change: opacity，否则部分安卓 WebView 下动画糊、掉帧 - 图片加载完成立刻移除动画类：
img.addEventListener('load', () => el.classList.remove('is-loading'))
容易被忽略的是：伪元素定位必须基于 position: relative 的容器，否则百分比偏移会相对于 body 计算，一缩放就漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
