img 是替换元素，默认不渲染 background-color，需用块级容器包裹并设宽高或 aspect-ratio，背景应设在容器上；推荐 linear-gradient 占位+opacity 淡入过渡。
直接给 img 设 background-color 为什么没用
因为 img 是替换元素，浏览器默认不渲染其背景——除非它有明确宽高且内容（图片）尚未加载。但多数情况下，未加载的 img 高度为 0 或仅留基线空隙，background-color 根本没地方画。你看到的“空白”或“缺省图标”，正是这个机制的表现。
常见错误现象：
– 写了 img { background-color: #eee; }，页面毫无反应
– 加了 width 和 height，但父容器是 display: inline 或未设 vertical-align，导致高度仍塌陷
– 在 Flex/Grid 容器里忘了加 align-items: stretch，img 不撑满高度
- 必须用块级容器（如
div）包裹img，并显式设置该容器的width和height（或aspect-ratio） -
background-color或background-image要写在容器上，不是img上 - 若需响应式，优先用
aspect-ratio: 16 / 9（现代浏览器），比padding-bottomhack 更简洁、可继承
用 linear-gradient 做占位背景比纯色更稳
纯色背景（如 background-color: #f5f5f5）在真实图片加载瞬间容易产生强烈色差，“啪”一下跳变。而渐变背景自带视觉层次，能弱化切换感；更重要的是，它支持 transition 动画（background-color 无法被 CSS transition 触发）。
推荐写法（无闪烁、易维护）：background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%), linear-gradient(-45deg, #f2f2f2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f2f2f2 75%), linear-gradient(-45deg, transparent 75%, #f2f2f2 75%);background-size: 20px 20px;
立即学习“前端免费学习笔记（深入）”；
- 避免用
background: url(data:image/svg+xml,...)，base64 解析慢，首屏延迟明显 - IE11 不支持多层渐变透明写法，如必须兼容，改用
filter: progid:DXImageTransform.Microsoft.gradient(...)回退，但代价高，建议放弃 - 不要在
@media或:hover中动态切换渐变——CSS 重绘开销小，但 JS 控制 class 切换会引入毫秒级延迟
background-image + opacity 过渡才是平滑显示的关键
只靠切换背景无法实现淡入：浏览器对 background-image 的变更不触发合成层提升，动画易掉帧；而直接改 img 的 opacity 又需要确保它一开始就填满容器，否则淡入时边缘漏出背景。
正确配合方式：
– 容器设 background-image: linear-gradient(...)，带 transition: background-image 0.2s
– img 设 opacity: 0; transition: opacity 0.3s，并 display: block; width: 100%; height: 100%
– 图片加载完成时，JS 添加 .loaded 类，触发 opacity: 1，同时可选地清空容器背景（background-image: none）
- 过渡时间控制在 0.2s–0.35s 之间：太短用户感知不到，太长拖慢交互节奏
- 别混用
opacity和background-color过渡——两者触发不同图层合成，安卓 WebView 下易糊、掉帧 - 务必加
will-change: opacity（或至少backface-visibility: hidden），尤其在滚动区域中，否则部分低端设备动画卡顿
懒加载场景下，伪元素光扫动画要慎用
“光扫”（shimmer）效果用 ::before 模拟，视觉反馈强，但实际加载中它和图片解码抢 GPU 资源，低端设备可能出现掉帧或闪烁。这不是设计问题，而是资源调度冲突。
典型错误写法：.image-container::before { animation: loadingShimmer 1.5s infinite; }
但图片本身也在 decode、paint，动画一跑，主线程压力陡增。
- 动画周期别设太短（2.5s 用户误以为失败）；推荐 1.6s–1.8s
- 监听
img.onload后立刻移除动画 class，别等动画自然结束——用户看到图就该停 - 如果项目用 IntersectionObserver 懒加载，动画应随进入视口才启动，避免提前消耗资源
- 真正影响体验的不是“有没有动画”，而是“布局是否稳定”：只要容器尺寸预留准确（
aspect-ratio或padding-bottom），即使没动画，也不会跳
