area标签的coords是基于图片原始尺寸的像素坐标，不响应css缩放、定位或transform；其点击区域仅由shape和coords决定，且无法通过css伪类控制视觉反馈。
area 标签的 coords 是像素坐标，不响应 CSS 定位
area 本身没有视觉表现，也不参与 CSS 盒模型——position、top、transform、margin 对它完全无效。它的点击区域只由 shape 和 coords 决定，且始终绑定图片原始尺寸（naturalWidth/naturalHeight）。哪怕你给 img 加了 width: 50% 或 transform: scale(0.8)，area 的坐标也不会自动缩放或偏移。
CSS 定位覆盖层必须手动同步图片缩放比
用 div + position: absolute 模拟热区时，坐标不再写死在 coords 里，而是靠 JS 计算并更新 left/top/width/height。关键点在于：
- 必须监听
img.onload和window.resize，否则缩放后覆盖层立刻错位 - 缩放比不能用
clientWidth / naturalWidth，得用offsetWidth / naturalWidth（后者含边框、内边距） -
poly区域需逐个顶点重算，不能只靠transform: scale()整体缩放——那会扭曲形状 - 移动端视口变化（如横竖屏切换）必须重新触发计算，否则热区“漂”在错误位置
area 不支持 hover/focus 等伪类，CSS 覆盖层可以
area 元素无法直接加 :hover、:focus 或 transition，浏览器根本不渲染它。所有视觉反馈（比如悬停高亮、点击涟漪）都得靠额外 DOM 元素实现。而用 CSS 定位的 div 覆盖层天然支持：
-
pointer-events: none配合子元素pointer-events: auto实现穿透式交互 -
aria-label和tabindex可直接加在覆盖层上，无障碍更可控 - 动画可以用
scale()或opacity，但注意：动画期间若未同步更新left/top，热区和视觉效果会脱节
移动端触控精度下，area 的 coords 偏移比 CSS 覆盖层更难调试
当图片被 CSS 缩放后，area 的热区物理尺寸可能远小于 44×44px（iOS 最小触控推荐值），导致点击无响应——但控制台没报错，开发者工具里 area 元素也正常显示，只是“静默失效”。而 CSS 覆盖层至少能通过 border 或 background 直观看到当前尺寸是否达标：
- 用
border: 2px solid red临时标出覆盖层边界，确认是否覆盖目标区域 - 真机测试时，打开 Safari 的「显示触摸点」辅助功能，验证实际触控坐标是否落在覆盖层内
- 不要依赖设计稿像素值直接填
coords；先用 JS 打印img.naturalWidth和img.offsetWidth，确认缩放比再换算
area 的坐标能随 CSS 自动适配——它不会。要么接受原生约束（严格匹配、不缩放、手调像素），要么用 CSS 覆盖层 + JS 同步，但必须把“缩放比计算”当成核心逻辑来写，而不是可有可无的补丁。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
