hover时background-image不生效主因是路径错误或未声明默认背景；background-image不可过渡，需用opacity或伪元素模拟；最小可行写法须设根相对路径及background-size/position。
hover 时 background-image 不生效的常见原因
直接写 background-image: url("hover.jpg"); 在 :hover 里却没变化，大概率是路径错误或图片加载失败。浏览器控制台会报 404，但很多人没看——尤其当用相对路径时，CSS 文件的基准路径 ≠ HTML 文件路径。另外，如果原元素没有显式设置 background-image（哪怕设为 none），部分旧版浏览器可能不触发重绘。
- 确保默认状态也声明了
background-image，哪怕只是background-image: none; - 检查开发者工具 Network 面板，确认 hover 图片是否发出请求、返回是否为
200 - 避免使用
../盲目上溯；推荐用根相对路径（如/assets/img/hover.jpg）或 CSS 中的url()路径与 CSS 文件同级存放
transition 无法平滑过渡 background-image
CSS 的 background-image 本身**不可动画**，transition 对它完全无效。你看到的“淡入”“切换”效果，其实是靠其他方式模拟的：比如叠加两层元素、用 opacity 交叠，或借助 background-position 做雪碧图位移。
- 想实现淡入淡出：用两个
div，一个常驻，一个在:hover下设opacity: 1并加transition: opacity .3s - 想用单元素 + 过渡感：改用
background-color或filter: blur()等可过渡属性辅助视觉衔接 - 真要换图又想要过渡？只能 JS 配合预加载 + class 切换 + opacity 动画，纯 CSS 做不到
用 :hover 切换背景图的最小可行写法
最简可靠写法必须包含初始状态和悬停状态，且图片路径可访问。下面这段能直接复制进项目跑通：
.banner {
width: 300px;
height: 200px;
background-image: url("/img/default.jpg");
background-size: cover;
background-position: center;
}
.banner:hover {
background-image: url("/img/hover.jpg");
}
- 路径统一用根相对路径（
/img/...），避免因 HTML 引入位置不同导致失效 - 务必加上
background-size和background-position，否则新图可能拉伸或偏移 - 如果图片尺寸差异大，hover 后布局跳动，说明缺了
background-size: cover或contain
用伪元素实现 hover 图片叠加（免 DOM 变动）
不想多写一层 HTML？用 ::before 伪元素盖在原背景上，hover 时显示，比直接换 background-image 更可控，也天然支持 fade 效果。
立即学习“前端免费学习笔记（深入）”；
.card {
position: relative;
width: 400px;
height: 250px;
background: #f0f0f0;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url("/img/overlay.jpg") center/cover;
opacity: 0;
transition: opacity .25s;
}
.card:hover::before {
opacity: 1;
}
- 伪元素默认
opacity: 0，hover 时渐显，视觉更柔和 - 所有背景控制逻辑集中在伪元素内，主元素只管容器样式
- 注意父元素必须有
position: relative，否则伪元素会脱离文档流定位错乱
position: relative，结果图飞到页面左上角去了。 
