html - 我怎样才能在图像上有多个单选按钮？ (HTML, CSS)

Question

我想在一张图片中包含 8 个单选按钮。更具体地说，我想要一张夏威夷群岛的照片。每个岛都有不同的单选按钮，所以我可以选择一个。非常感谢

Answer 1

那么你应该使用绝对位置。

div {
  height:400px;
  width: 400px;
  background: #124578;
  position: relative;
}

#radio01 {
  position:absolute;
  left:0;
  top:50%;
}

#radio02 {
  position:absolute;
  left:calc(100% - 25px);
  top:25%;
}

#radio03 {
  position:absolute;
  left:50%;
  top:70%;
}

<div>
  <form action="">
    <input type="radio" id="radio01" name="radio" />
    <input type="radio" id="radio02" name="radio" />
    <input type="radio" id="radio03" name="radio" />
  </form>
</div>