纯CSS的background-position无法实现真正的局部放大镜效果，必须配合JS动态计算坐标；因写死百分比或固定值只能让放大图居中，而真实需求是鼠标移动时放大区域实时跟随，需将clientX/clientY转换为背景图偏移量，公式为-xscale和-yscale（px单位），并统一使用px单位避免跳动，同时注意四套坐标系对齐。
纯 CSS 的 background-position 变换能实现局部放大镜效果，但必须配合 JS 动态计算坐标——仅靠 :hover 或静态值无法真正“鼠标指哪放大哪”。它不是“开箱即用”的 CSS 技巧，而是 CSS 与 JS 协同的视觉模拟方案。
为什么 background-position 必须动态算，不能写死百分比？
写死 background-position: 50% 50% 只能让放大图固定居中；真实需求是鼠标移动时，放大区域实时跟随。浏览器不提供“鼠标在背景图上点击对应像素”的自动映射，得自己把 clientX/clientY 转成背景图偏移量。
- 偏移公式本质是：放大图需向反方向移动，才能让鼠标点下的原图区域“露出来”
- 若小图宽高为
400px × 300px，大图为1200px × 900px，缩放倍数就是3 - 鼠标在小图内坐标为
(x, y)，则大图background-position应设为-x * 3和-y * 3（单位 px） - 直接用百分比（如
${x / 400 * 100}%）只在background-size: cover或明确尺寸时有效，且需同步约束容器尺寸
监听 mousemove 时，offsetX / getBoundingClientRect() 怎么选？
e.offsetX 看似简洁，但 IE 不支持，且在父元素有 transform 或 border 时会出错；getBoundingClientRect() 更可靠，但要手动减去容器左上角偏移。
- 推荐写法：
const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; - 务必扣除容器自身的
border和padding：用getComputedStyle(container).borderLeftWidth获取并转为数字减去 - 如果容器设了
box-sizing: border-box，rect.width已含 border，但计算坐标时仍要从clientX减去 border 宽度，否则镜片位置偏右 - 移动端不能依赖
mousemove，必须改用touchstart+touchmove，且加e.preventDefault()阻止滚动
background-size 和 background-position 单位混用导致跳动
常见现象：鼠标一动，放大图突然“闪一下”或“抖动”，根本原因是单位不统一——比如 background-size: 100% 和 background-position: -100px 同时存在，浏览器渲染时会反复重算比例。
立即学习“前端免费学习笔记（深入）”；
- 统一用 px：设
background-size: 1200px 900px（大图原始尺寸），再用background-position: -x * scale px -y * scale px - 禁用
background-size: 100% 100%——它强制拉伸背景图，放大后必然模糊 - 若必须用百分比，确保
background-size是整数倍（如300% 300%），且容器宽高固定，否则1%对应的像素值会随窗口缩放变化 - 加
image-rendering: crisp-edges可缓解线条/文字类图的模糊，但对照片可能加重锯齿，慎用
真正难的不是写几行 JS，而是四套坐标系对齐：CSS 布局尺寸、浏览器事件坐标、图片自然尺寸（img.naturalWidth）、背景图渲染像素。哪怕只差 1px，放大镜就会偏移——调试时先固定鼠标到图片中心，验证该点是否精准居中，再放开跟踪。
