background-image 本身不响应 transform，需对容器用 background-size 配合 transition 实现伪缩放，或用 ::before 伪元素承载背景图并对其应用 transform: scale()。
hover 时 background-image 怎么用 transform: scale 实现缓慢放大
直接说结论：background-image 本身不响应 transform，你对容器加 transform: scale()，放大的是整个元素（包括边框、文字、子元素），不是仅背景图。要只动背景图，得换思路。
用 background-size 配合 transition 做“伪缩放”效果
这是最常用也最可控的方式：通过增大 background-size 让背景图在固定区域内“撑开”，视觉上像在缓慢放大。关键在于设置合适的起始和结束值，并绑定 transition。
-
background-size初始设为100% 100%（或略小如110% 110%避免边缘裁切） - hover 时设为更大的值，比如
120% 120%或cover+background-position: center确保居中拉伸 - 必须显式声明
transition: background-size 0.4s ease，否则无动画 - 注意：IE10+ 支持
background-size过渡，但 Safari 旧版本可能有渲染抖动
div {
background-image: url(./bg.jpg);
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
transition: background-size 0.4s ease;
}
div:hover {
background-size: 120% 120%;
}
想真用 transform-scale？只能包裹一层伪元素
如果坚持用 transform: scale()，唯一办法是把背景图挪到 ::before 伪元素上，再对它单独缩放。这样容器本身不动，只有背景层被放大。
- 容器设
position: relative，伪元素position: absolute覆盖全区域 - 伪元素的
background-image必须设background-size: cover或具体尺寸 - hover 时对
::before加transform: scale(1.1)，同时用transform-origin: center防止偏移 - 性能更好（
transform触发 GPU 加速），但多一层 DOM 抽象，调试时容易漏看伪元素样式
div {
position: relative;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url(./bg.jpg) center/cover no-repeat;
transition: transform 0.4s ease;
}
div:hover::before {
transform: scale(1.1);
transform-origin: center;
}
为什么 background-attachment: fixed 不适合做视差放大
有人试过用 background-attachment: fixed 搭配 background-size 过渡，结果发现 hover 时背景“跳一下”或根本不动——这是因为 fixed 背景锚定视口，缩放计算逻辑混乱，且多数浏览器不支持对其做过渡动画。
- Chrome 和 Firefox 对
background-attachment: fixed+transition的支持极不稳定 - 移动端基本失效（iOS Safari 强制转为
scroll） - 即使生效，也会因视口锚定导致放大中心偏移，无法精准控制“从中心缓慢扩散”的效果
真正要做视差滚动效果，应该用 JS 监听 scroll + transform: translateY() 控制不同层速度，而不是依赖 background 属性。
最稳妥的路径就两条：纯 CSS 用 background-size 过渡，或用伪元素 + transform。别碰 background-attachment: fixed 的过渡幻想，它在实际项目里大概率让你卡在调试半小时后删掉重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
