background-size不支持关键字与数值间的过渡动画，需用自定义属性+calc()或transform模拟实现；前者适用于需真实尺寸变化的场景，后者更轻量兼容性好。
background-size 本身不支持过渡动画
直接给 background-size 加 transition 是无效的——浏览器根本不触发重绘，尤其在从 cover 切到具体像素值（比如 200px 150px）时，多数情况会“跳变”，没有中间帧。
原因在于：cover、contain 是关键字，而 100px 200px 是长度值，CSS 动画引擎无法在不同类型间插值。只有同类型值（如两个 px 值、两个 % 值）才能平滑过渡。
常见错误现象：transition: background-size 0.3s 写了但毫无动画效果；或者 hover 后尺寸突变，像被“重载”了一样。
用 calc() + 自定义属性实现可过渡的背景图缩放
核心思路：避开关键字，全程用数值表达尺寸，并通过 CSS 自定义属性驱动变化，让 calc() 把它转成合法的 background-size 值。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 定义一个自定义属性，比如
--bg-scale，初始设为1 - 用
background-size: calc(100% * var(--bg-scale)) calc(100% * var(--bg-scale))替代cover - hover 或 JS 触发时，只改
--bg-scale的值（如从1→1.2），再配合transition: --bg-scale 0.3s ease - 注意：必须开启
will-change: background-size或给容器加transform: translateZ(0)，否则某些浏览器仍可能掉帧
示例：
div {
background-image: url("bg.jpg");
background-size: calc(100% * var(--bg-scale)) calc(100% * var(--bg-scale));
--bg-scale: 1;
transition: --bg-scale 0.3s ease;
}
div:hover {
--bg-scale: 1.3;
}需要 cover/contain 语义时的兼容写法
如果业务逻辑强依赖 cover 的裁剪行为（比如头图始终填满容器），不能简单用等比缩放替代——因为 cover 是按宽高比动态选尺寸，而 calc(100% * s) 是强制等比拉伸，可能留白或溢出。
这时得退一步：用 JS 监听容器尺寸，计算出等效的像素值，再注入到自定义属性中。但要注意：
- 不要在 resize 事件里高频设
--bg-scale，应防抖或用ResizeObserver - 服务端渲染（SSR）场景下，首次渲染时 JS 还没执行，需 fallback 到
background-size: cover，再由 JS 覆盖 - 部分旧版 Safari 对自定义属性 +
calc()在background-size中的支持不稳定，可加一层@supports (background-size: 100px)条件包裹
更轻量的替代方案：用 transform 模拟缩放感
如果只是要“看起来在放大”，不强求背景图真实尺寸变化，transform: scale() 是最稳的选择——它天然支持过渡，且性能远好于重绘背景图。
做法是把背景图作为伪元素内容，再对伪元素做缩放：
- 给容器设
position: relative -
::before伪元素铺满，background-image设在这里 - 对
::before应用transform: scale(var(--scale)); transition: transform 0.3s - 注意：伪元素需设
z-index: -1避免遮挡内容
优点是兼容性好（IE10+）、无尺寸插值问题；缺点是缩放中心默认是元素中心，若需左上角锚点，得加 transform-origin: 0 0。
真正难的不是写几行 CSS，而是想清楚：你到底要“控制背景图的真实尺寸”，还是“让用户感知到放大效果”。前者绕不开计算和兼容处理，后者用 transform 一行就搞定。很多人卡住，是因为一开始没区分这两件事。
