如何使用HTML给背景图片添加可点击区域-html教程-PHP中文网

HTML中图片热点必须用配合实现，不支持背景图；响应式需JS动态重算坐标；替代方案是CSS绝对定位覆盖层；无障碍要求加alt或覆盖层用role="link"+aria-label。

如何使用html给背景图片添加可点击区域

用和定义图片热点区域

HTML 本身不支持直接给背景图（background-image）添加可点击区域——这是关键限制。必须改用标签加载图片，再配合实现热点映射。

常见错误是试图对 div 设置 background-image 后加，这完全无效，因为只能作用于带 usemap 属性的元素。

的 src 必须和的 name 通过 usemap="#xxx" 关联（注意 # 符号）
的 shape 支持 "rect"、"circle"、"poly"，坐标单位为像素，原点在左上角
href 可写链接，onclick 可绑定 JS 逻辑，但需注意移动端 click 延迟问题

响应式场景下坐标会失效？用 JS 动态重算

当图片缩放或容器尺寸变化时，的固定像素坐标立刻错位。纯 HTML/CSS 无法解决，必须用 JS 监听尺寸变化并重设 coords。

典型做法是：获取的自然宽高与当前渲染宽高，计算缩放比，再将原始坐标乘以该比例。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

不要依赖 window.resize 频繁触发，可用 ResizeObserver 更精准监听图片父容器
原始坐标建议存在 data- 属性里（如 data-orig-coords="10,20,100,80"），避免硬编码在 JS 中
如果使用 CSS object-fit: cover，需额外处理裁剪偏移，此时 getBoundingClientRect() 比单纯看 offsetWidth 更可靠

替代方案：CSS `pointer-events` + 绝对定位覆盖层

当热点区域不规则、数量多或需动画交互时，维护成本高。更灵活的方式是用透明

 覆盖在图片上，靠 CSS 定位和 pointer-events 控制点击穿透。这种方案绕过坐标映射，直接操作 DOM，兼容性好且易调试。

外层容器设 position: relative，图片设 position: absolute 或普通流式布局
每个热点用 ，百分比值便于响应式
确保热点 z-index 高于图片，并设置 pointer-events: auto；图片本身可设 pointer-events: none 避免误触

缺点：无法导出为标准图像热点，SEO 和无障碍支持弱于 

无障碍与语义化不能忽略
无论用  还是覆盖层，屏幕阅读器用户需要明确知道这些区域的功能。仅靠视觉位置或图标不够。

给  加 alt 属性（必需），描述该区域用途，如 alt="进入产品介绍页面"

覆盖层方案中，用 role="link" + aria-label 显式声明功能，避免只靠 onclick

所有热点区域应能用键盘 Tab 聚焦，且有清晰焦点样式（:focus-visible）

坐标的精确性和可访问性往往被快速上线忽略，但一旦用户反馈“点不到”或“读屏器没反应”，回溯修改成本远高于初期预留属性。