直接用:hover切换background-image会闪屏，因浏览器不预加载hover图，首次请求导致延迟；且background-image不支持transition，须用双层容器opacity动画或伪元素实现淡入。
直接用 :hover 切换 background-image 是可行的，但多数人踩坑不是语法写错，而是图片加载时机、尺寸不一致或过渡生硬导致视觉断裂。
为什么悬停后背景图“闪一下”或延迟出现
浏览器默认不会预加载 :hover 状态下的背景图，首次悬停时才发起请求，尤其在大图或弱网下明显卡顿。
- 解决方法：在默认状态（非 hover）用透明图或 base64 占位，或用
link rel="prefetch"提前拉取 hover 图片 URL - 更稳妥的做法是，在 CSS 中用
background-image同时声明两张图（用逗号分隔），再配合background-position或background-size控制显示区域——但这只适用于雪碧图（sprite）场景 - 普通切换推荐加一句
background-size: cover;防止因图片尺寸不同造成缩放跳变
如何让背景图切换带淡入效果
CSS 的 background-image 本身不支持过渡动画，transition: background-image 在大多数浏览器中无效（仅 Firefox 部分支持，且行为不稳定）。
- 可行方案：用两个重叠的
div，分别设默认图和悬停图，通过opacity+transition切换显示 - 轻量替代：用
background-color搭配background-image做叠加过渡，例如默认设background: #f0f0f0 url(default.jpg)，hover 时改background: #e0e0e0 url(hover.jpg)，颜色过渡能缓解突兀感 - 如果必须图像渐变，得借助伪元素：
::before固定 hover 图并设opacity: 0，hover 时改为opacity: 1，主元素保持默认图
background-image 路径错误导致 hover 失效的典型表现
悬停无反应，开发者工具里发现 hover 状态的 background-image 值是 none 或报 404 —— 很大概率是路径相对于当前 CSS 文件解析，而非 HTML 页面。
- 检查方式：右键「检查元素」→ 切到「Computed」标签页，搜
background-image，点链接看是否打不开 - 相对路径如
url(../img/hover.jpg)，要确认 CSS 文件所在目录与图片目录的层级关系 - 用绝对路径（以
/开头）或根相对路径更稳，例如url(/assets/bg-hover.jpg) - Vite / Webpack 项目中，若图片放在
src/assets，需确保构建后路径匹配，有时需配public目录或使用@/assets别名（但别名在纯 CSS 里不生效）
真正难处理的是多分辨率适配和高对比度模式下背景图可访问性缺失——比如用户开了 Windows 的“高对比度主题”，自定义背景图会被强制禁用，这时候得靠 background-color 保底，并补上 aria-label 或视觉隐藏文本说明状态变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
