在特定位置的图像顶部映射多个可点击元素

Posted 2023-03-06

【中文标题】在特定位置的图像顶部映射多个可点击元素

【英文标题】：mapping multiple clickable elements on top of image at specific locations

【发布时间】：2020-10-01 12:25:04

【问题描述】：

我正在尝试使用图像创建自定义世界地图，您可以在其中单击“大陆”上方的按钮。这是一个离子应用程序，预计将在移动和桌面上推出。我能找到解决此问题的唯一真正答案是使用带有position: absolute; 的CSS，然后设置像素（例如：top: 50px; left: 30px;）。我担心当在不同的网络浏览器上查看和通过移动设备使用时，按钮不会保持在正确的位置。有没有一种方法可以确保按钮无论如何都保持在所需的位置，或者唯一的方法是通过 CSS 定位和 px 操作？附件是世界地图的照片（某些部分被剪掉：https://imgur.com/a/yzPRVh1）我正在尝试实现这一点。我想在每个大陆的顶部都有一个可点击的元素并居中。谢谢！

【参考方案1】：

您可以在图片上放置一个 div 并在像素上使用百分比，但仍需要使用 @media-queries 进行调整。