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

Question

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

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

position radio buttons elements over background image

有没有更好的方法来完成这个？也许使用 javascript.

Answer 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>

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

How to include radio buttons over image?

html

javascript

css

background-image

radio-button