直接用 transform: scale() 无法实现“放大局部细节”，因其仅等比缩放整图并裁切边缘；真正需要的是“镜头式缩放”，即通过 ::after 伪元素配合 background-image、background-position 和自定义属性动态控制焦点区域。
为什么直接用 transform: scale() 无法实现“放大局部细节”
很多人试过给图片加 transform: scale(1.2)，结果是整张图等比放大、居中裁切，边缘被切掉，但鼠标指哪块区域、就放大哪块的需求完全没满足。真正要的是“镜头式缩放”——类似放大镜效果，焦点随鼠标移动，且只放大原图局部。::after 本身不能直接读取鼠标坐标，所以必须配合 background-image + background-position 动态控制视口，而 background-size 决定放大倍率。
用 ::after 模拟放大镜的关键 DOM 结构与 CSS 约束
必须把图片设为容器（position: relative），再让 ::after 充当可移动的“镜头层”。这个伪元素不能用 content: url()，否则无法灵活缩放；必须用 background-image 复制原图，并通过 JS 实时更新 background-position。
- 父容器需设
overflow: hidden，否则放大后内容溢出 -
::after必须设position: absolute、z-index: 1，且宽高固定（如200px） -
background-size要大于100%（例如300%），值越大放大越强 -
background-repeat: no-repeat是必须的，否则会平铺
JS 如何计算 background-position 并绑定到 ::after
CSS 伪元素无法直接由 JS 设置样式，所以得把 ::after 的 background-position 拆成两个自定义属性（--x 和 --y），再在 CSS 中用 calc() 映射过去。这是目前最可靠、无需额外 DOM 的方案。
示例关键代码：
img.zoomable {
position: relative;
cursor: crosshair;
}
img.zoomable::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background-image: url("photo.jpg");
background-size: 300%;
background-repeat: no-repeat;
pointer-events: none;
z-index: 1;
background-position: calc(var(--x, 50%) - 100px) calc(var(--y, 50%) - 100px);
}
对应 JS：
const img = document.querySelector('img.zoomable');
img.addEventListener('mousemove', (e) => {
const rect = img.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
img.style.setProperty('--x', `${x}%`);
img.style.setProperty('--y', `${y}%`);
});
常见失效原因和兼容性注意点
这个方案在 Safari 15.4+、Chrome 100+、Firefox 95+ 上表现一致，但老版本 Safari 对 background-position 里用 calc() + 自定义属性支持不稳，可能需要降级为 JS 直接操作 style.backgroundPosition（但需额外创建真实元素）。
- 图片必须是同源或允许 CORS，否则
background-image加载失败，伪元素空白 - 如果图片是响应式（
max-width: 100%），getBoundingClientRect()返回的是实际渲染尺寸，不用额外处理 -
background-size: 300%表示背景图宽高变为原始尺寸的 3 倍，因此background-position的偏移范围实际是-200% ~ 0%，但用百分比计算更安全 - 鼠标移出区域时，
mousemove不触发，建议加mouseleave清除--x/--y或设回默认值
真正的难点不在写法，而在坐标映射的精度控制——background-position 百分比值的小数位丢失、设备像素比（window.devicePixelRatio）未补偿，都会导致镜头抖动或错位。实际项目里，建议对 x/y 做 Math.round() 或限幅处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
