直接用:hover切换background-image会闪屏，因浏览器不预加载hover图，首次请求导致延迟；且background-image不支持transition，须用双层容器opacity动画或伪元素实现淡入。
直接用 background-image 在 :hover 里换图，第一次悬停大概率会闪一下——不是你写错了，是浏览器没预加载那张图。
为什么 hover 换背景图会闪烁
浏览器对 background-image 是懒加载的：默认状态的图会随页面一起请求，但 :hover 里的图，直到鼠标真挪过去才发请求。网络延迟 + 解码时间 = 短暂空白，视觉上就是“闪”。尤其在弱网或高分辨率图下更明显。
- 控制台 Network 面板能看到
hover.jpg请求发生在 hover 动作之后，状态码可能是 200，但时间戳晚于首屏渲染 - 这不是路径错（404 会报红），而是加载时机问题
- 雪碧图能根治，因为所有状态图都在同一张图里，一次请求全载入
雪碧图实现 hover 按钮的最小可行写法
把正常态、hover 态、active 态三张图垂直拼成一张，高度累加，用 background-position 控制显示哪一段。
- 假设雪碧图
/img/button-sprite.png高 180px，每态高 60px：正常态 y=0，hover 态 y=-60px，active 态 y=-120px - CSS 必须显式设
background-size: auto（或不设），否则缩放会破坏定位 - 元素尺寸要固定，比如
width: 200px; height: 60px;，不然background-position偏移量会失准 - 完整写法示例：
.btn {
display: block;
width: 200px;
height: 60px;
background-image: url("/img/button-sprite.png");
background-repeat: no-repeat;
}
.btn:hover {
background-position: 0 -60px;
}
.btn:active {
background-position: 0 -120px;
}
不用雪碧图时怎么缓解闪烁
如果图太多、状态太杂，拼雪碧图成本高，可用预加载兜底，但得手动触发。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 在
<head>里加<link rel="preload" as="image" href="/img/hover.jpg">，强制提前拉取 - 或者用 CSS 把 hover 图藏在不可见区域：
.btn::after { content: ""; background: url("/img/hover.jpg"); visibility: hidden; position: absolute; left: -9999px; } - 注意：仅靠
opacity: 0或display: none不行，浏览器可能仍不加载 - 预加载只对现代浏览器有效，IE 完全不支持
rel="preload"
伪元素叠加比直接换 background-image 更可控
想保留过渡动画（比如淡入）、又不想动 HTML 结构？用 ::before 盖一层，hover 时显隐它，比改整个背景更稳。
- 原元素保持默认图，
::before贴 hover 图，初始opacity: 0 .btn:hover::before { opacity: 1; transition: opacity .2s; }- 这样既避开
background-image不可过渡的限制，又不用拼图、不用预加载 - 注意：必须设
position: relative在 .btn 上，否则伪元素定位会飘
雪碧图本质是用空间换时间，而伪元素方案是用结构换体验——选哪个，取决于你维护成本和兼容性要求的底线在哪。真正容易被忽略的，是 background-size 的隐式影响：一旦设了 cover 或 contain，background-position 的像素偏移就失效了，得换百分比或重新算缩放后坐标。
