如何在图像上包含单选按钮？答案

【问题标题】：How to include radio buttons over image?如何在图像上包含单选按钮？
【发布时间】：2019-09-26 19:54:50
【问题描述】：

我想在每个黄色标记上放置一个单选按钮。我不知道如何正确放置每个单选按钮。

我发现了类似的问题，其中没有说明如何将单选按钮放在正确的位置：

Place Radio Buttons over image

Make radio buttons over power background image

position radio buttons elements over background image

有没有更好的方法来做到这一点？也许使用 javascript。

【问题讨论】：

如果您知道确切的图像，您可以计算出每个小框距文档顶部/左侧的百分比，然后在您的图像顶部创建一个position: relative div（相同宽度/高度作为图像）并相应地绝对定位您的单选按钮。但是没有任何神奇的解决方案可以让任何随机图像都能正常工作。

标签： javascript html css radio-button background-image

【解决方案1】：

希望我没有误解您的问题。在图像上放置元素只需要 css。

.container {
  position: relative;
}
.container input[type="radio"] {
  position: absolute;
}

<div class="container">
  <img src="https://i.stack.imgur.com/IlWS2.jpg">
  <input type="radio" name="option1" id="radio1" style="top:150px;left:278px;">
  <input type="radio" name="option1" id="radio2" style="top:150px;left:318px;">
  <input type="radio" name="option1" id="radio3" style="top:204px;left:402px;">
  <input type="radio" name="option1" id="radio4" style="top:260px;left:446px;">
  <input type="radio" name="option1" id="radio5" style="top:260px;left:474px;">
  <input type="radio" name="option1" id="radio6" style="top:260px;left:504px;">
  <input type="radio" name="option1" id="radio7" style="top:260px;left:534px;">
  <input type="radio" name="option1" id="radio8" style="top:260px;left:566px;">
  <input type="radio" name="option1" id="radio9" style="top:350px;left:358px;">
</div>

【讨论】：