用 transform: scale() 实现 hover 图片放大最省事，但需加 overflow: hidden 防溢出、transition 保证平滑、避免 position: absolute 破坏布局，并通过 data-large-src 或 background-image 解决高清图加载，同时适配移动端 touch 和 stacking context 层级问题。
hover 触发图片放大但不遮挡内容
直接用 transform: scale() 最省事，但默认会撑开父容器或导致布局抖动。关键不是“怎么放大”，而是“怎么让放大不破坏现有排版”。
- 给徽章容器加
overflow: hidden，否则放大会溢出边界 - 放大时用
transform: scale(1.8)而非改width/height，避免重排（reflow） - 必须加
transition: transform 0.2s ease，不然闪得人眼晕 - 别在
:hover里写position: absolute—— 容易脱离文档流，和其他徽章打架
img 标签 srcset 和放大图不一致怎么办
用户 hover 看的是小图的 src，但预览要高清大图，硬塞同一个地址肯定糊。不能靠 JS 拼路径猜大图名，得显式声明。
- 用自定义属性存大图地址：
<img data-large-src="badge_gold_full.png" src="badge_gold_sm.png"> - hover 时用 CSS 显示一个
::after伪元素，背景图设为attr(data-large-src)（注意：仅 Chrome/Firefox 支持，Safari 不行） - 更稳的法子是套一层
<div class="badge-preview"><img></div>，把大图作为background-image写在 CSS 里，按 class 区分不同徽章
移动端 touch 设备上 hover 失效
iPhone、iPad 上没有真正意义上的 hover，只在第一次点击后短暂触发，接着就失效。这不是 bug，是 Safari 的交互策略。
- 别依赖纯 CSS
:hover做核心功能，至少补个点击展开逻辑 - 加
@media (hover: hover) and (pointer: fine)包裹 hover 样式，避免移动端加载无用 transition - 如果必须支持点触预览，用
onclick="this.classList.toggle('expanded')"+ CSS.expanded > img { transform: scale(2); }更可靠 - 注意 iOS Safari 对
transform: scale()的渲染 bug：有时模糊，加will-change: transform或-webkit-backface-visibility: hidden强制 GPU 渲染
多个徽章堆叠时 z-index 错乱
徽章常出现在用户头像旁、侧边栏、成就页网格里，一 hover 就被其他元素盖住，根本不是层级没设够，而是 stacking context 搞的鬼。
- 检查父容器有没有
opacity 、<code>transform、filter—— 这些都会创建新 stacking context，让子元素的z-index只在内部生效 - 放大图的容器必须比徽章本身高一级 stacking context，推荐用
position: relative+z-index: 10显式提层 - 别在徽章上直接写
z-index: 1，它和父级同级，放大后还是被隔壁卡片压着 - 真要堆叠控制精细，用
isolation: isolate主动隔离 stacking context，比猜谁创建了上下文更省心
最麻烦的从来不是怎么放大，而是放大之后，那张图到底该“属于谁”——是贴着原位置浮起，还是脱离文档流居中弹出，还是跟着鼠标移动。选错定位方式，后面所有 z-index 和 transform 都在救火。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
