【问题标题】: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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-02-12
    • 2019-12-29
    • 2021-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-22
    相关资源
    最近更新 更多