使用单选按钮制作图像块（CSS，HTML）

Question

我想让一个带有单选按钮的图像像块一样响应。当我更改窗口的比例时，我希望带有单选按钮的图像像块一样改变，而不会丢失单选按钮的位置。

.island{

 background-image: url("nhsia.png"); 
 display:block;
 position: relative;
 width: 100%;
 height: 550px;
 background-image: url("nhsia.png"); 
 background-repeat: no-repeat;
 background-size: contain;
 }

 #radio1 {
 position:absolute;
 left:7%;
 top:17.5%;
 }

 #radio2 {
 position:absolute;
 left:15.5%;
 top:15%;
 } 



HTML

<div class="island">
<form action="">
<input type="radio" name="radio" id="radio1"/><br/>
<input type="radio" name="radio" id="radio2"/><br/>
<input type="radio" name="radio" id="radio3"/><br/>
<input type="radio" name="radio" id="radio4"/><br/>
<input type="radio" name="radio" id="radio5"/><br/>
<input type="radio" name="radio" id="radio6"/><br/>
<input type="radio" name="radio" id="radio7"/><br/>
<input type="radio" name="radio" id="radio8"/><br/>
</form>
</div>

Answer 1

单选按钮移动的原因是因为您在单选按钮的位置上使用了相对值，因此当父元素的大小发生变化时，位置也会发生变化。

如果您不希望它们四处移动，则应使用 px 这样的精确值，而不是相对值（如 Fiddle 所示）。

CSS

.island {
  display: block;
  position: relative;
  width: 100%;
  height: 550px;
  background-image: url("http://placehold.it/650x550");
  background-repeat: no-repeat;
  background-size: contain;
}

#radio1 {
  position: absolute;
  left: 40px;
  top: 10px;
}

#radio2 {
  position: absolute;
  left: 90px;
  top: 50px;
}

HTML

<div class="island">
  <form action="">
    <input type="radio" name="radio" id="radio1" />
    <br/>
    <input type="radio" name="radio" id="radio2" />
    <br/>
    <input type="radio" name="radio" id="radio3" />
    <br/>
    <input type="radio" name="radio" id="radio4" />
    <br/>
    <input type="radio" name="radio" id="radio5" />
    <br/>
    <input type="radio" name="radio" id="radio6" />
    <br/>
    <input type="radio" name="radio" id="radio7" />
    <br/>
    <input type="radio" name="radio" id="radio8" />
    <br/>
  </form>
</div>

---

补充说明

所以看起来您正在为地图执行此操作。我建议您也将图像设置为固定大小，否则地图会缩小和增长，但您的单选按钮将无法适应新位置。