用@keyframes对background-image做opacity动画必然闪白或透明卡顿，因其无load事件、无法监听就绪；可靠方案是用+object-fit模拟背景图并监听load事件，或预加载+占位+硬延迟妥协处理。
直接用 @keyframes 给背景图容器加 opacity 动画，几乎一定会闪白或卡在透明状态——因为动画启动和图片加载完全异步，浏览器根本不管背景图有没有就绪。
为什么 background-image 不支持 onload 事件
背景图是 CSS 属性，不是 DOM 元素，所以没有 load 事件、没有 complete 属性、也不能调用 decode()。你无法像 <img> 那样监听它是否加载完成。
- 所有基于
background-image的淡入，本质都是“赌时机”：靠延迟、靠预加载、靠骨架占位，而非真实就绪信号 -
document.readyState === 'complete'或window.onload只表示 HTML 和脚本加载完，不保证 CSS 背景图已下载解码 - 缓存命中时可能快，但慢网或首次访问下，
opacity: 1很可能在图还没渲染出来前就生效了，结果就是“淡入一块空白”
用 img + object-fit 模拟背景图是最可靠方案
把真正需要淡入的图用 <img> 标签加载，再用 CSS 布局压成全屏/容器背景，这样就能走完整的资源加载生命周期（load/error/complete）。
- HTML 中写：
<img src="bg.jpg" class="bg-fade" alt=""> - CSS 中定位并覆盖：
.bg-fade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; } - JS 控制：
img.addEventListener('load', () => img.classList.add('loaded'))，配合.bg-fade.loaded { opacity: 1; } - 必须设
width和height（或aspect-ratio），否则object-fit: cover在动画中会抖动
如果非要用 background-image，只能靠预加载 + 占位策略
这是妥协方案，适用于 banner、首屏大图等可接受一定误差的场景。
- 在
中预加载：<link rel="preload" as="image" href="bg.jpg">，提升加载优先级 - 容器初始状态用骨架色块或 LQIP 占位图：
background-image: url("data:image/svg+xml,..."); - 动画触发不能依赖 JS 加载时机，而要靠 CSS
animation-delay硬等（比如delay: 0.8s），这个值需根据实测慢网加载时间定 - 避免写
animation: fadeIn 0.5s forwards后不设初始opacity: 0—— 否则未动画前就显示原图，动画反而变成“闪一下”
opacity 动画 + background-image 的隐藏坑
即使你绕过了加载时机问题，还有两个常被忽略的渲染细节：
-
opacity变化本身不会触发重排，但若容器尺寸随内容变化（比如没设height），动画过程中高度跳变会导致布局抖动，看起来像“图片弹了一下” - 部分安卓 WebView 对
background-image+opacity的合成层处理异常，可能出现半透明残留或闪烁，加will-change: opacity有时能缓解，但不可靠 - 无障碍方面：
opacity: 0的元素仍可被屏幕阅读器读取，若背景图含关键信息，应配aria-hidden="true"或改用语义化<img>
真正可控的淡入，永远建立在可监听的资源加载信号之上；而 background-image 天然缺失这个信号。别试图用 CSS 动画“掩盖”加载不确定性——要么换 <img>，要么接受预估延迟带来的体验折损。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
