Question

我有夏威夷群岛的照片，我已经放置了8个绝对位置的单选按钮。但是，当我使用Chrome检查器查看带有单选按钮的图像是否响应时，我发现它们不是，并且按钮不会保留在全屏图像上的现场。有什么建议吗？

CSS：

#radio1{
    position:absolute;
    top:58.9%;
    left:24.4%;
}

#radio2{
    position:absolute;
    top:57.5%;
    left:27.1%;
}

#radio3{
    position:absolute;
    top:63.2%;
    left:34.05%;
}

#radio4{
    position:absolute;
    top:66.8%;
    left:38%;
}

#radio5{
    position:absolute;
    top:68.9%;
    left:40.4%;
}

#radio6{
    position:absolute;
    top:69.7%;
    left:38.8%;
}

#radio7{
    position:absolute;
    top:73.1%;
    left:40.5%;
}

#radio8{
    position:absolute;
    top:78.8%;
    left:45.5%;
}

#third.form img{
    display:block;
    max-width: 100%;
    height: auto;

HTML：

<img src="map.png">
<label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
<label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
<label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
<label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
<label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
<label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
<label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
<label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>

Answer 1

好的，所以点位置会发生变化，因为左侧和顶部位置是相对于整个容器而不是包含div本身。

Answer 2

从片段中，您将单选按钮绝对定位到body元素。

由于图像标记是内联的，无法保存html子元素，只需将单选按钮放在div（父级）中，然后将背景图像添加到div中。然后您将注意到单选按钮如何定位到父（div容器）

的绝对位置

＆＃13;

#container{
  position:relative;
  background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRiWmnVBwnR9ddbHOGmGaoA3gTrU5r3pslI-IybKWIJz4Amy6VA);
  background-size:cover;
  width:200px;
  height:200px;
}
#radio1{
position:absolute;
top:58.9%;
left:24.4%;
}

#radio2{
position:absolute;
top:57.5%;
left:27.1%;
}

#radio3{
 position:absolute;
top:63.2%;
left:34.05%;
}

#radio4{
position:absolute;
top:66.8%;
left:38%;
}

#radio5{
position:absolute;
top:68.9%;
left:40.4%;
}

#radio6{
position:absolute;
top:69.7%;
left:38.8%;
}

#radio7{
position:absolute;
top:73.1%;
left:40.5%;
}

#radio8{
position:absolute;
top:78.8%;
left:45.5%;
}

#third.form img{
display:block;
max-width: 100%;
height: auto;

＆＃13;

<div id="container">
  <label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
  <label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
  <label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
  <label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
  <label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
  <label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
  <label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
  <label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>

＆＃13;

Answer 3

首先，您需要使用容器来包装单选按钮子项，并且可以将岛图像设置为背景。

然后利用媒体查询设置图像大小以实现响应式设计。

＆＃13;

.container {
  position: relative;
  background-image: url(http://hawaiian-words.com/hw/wp-content/uploads/2014/09/hawaii-island-road-map.jpg);
  background-size: cover;
  width: 884px;
  height: 927px;
}

#radio1 {
  position: absolute;
  top: 58.9%;
  left: 24.4%;
}

#radio2 {
  position: absolute;
  top: 57.5%;
  left: 27.1%;
}

#radio3 {
  position: absolute;
  top: 63.2%;
  left: 34.05%;
}

#radio4 {
  position: absolute;
  top: 66.8%;
  left: 38%;
}

#radio5 {
  position: absolute;
  top: 68.9%;
  left: 40.4%;
}

#radio6 {
  position: absolute;
  top: 69.7%;
  left: 38.8%;
}

#radio7 {
  position: absolute;
  top: 73.1%;
  left: 40.5%;
}

#radio8 {
  position: absolute;
  top: 78.8%;
  left: 45.5%;
}

#third.form img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 884px;
    height: 927px;
  }
}

@media (max-width: 768px) and (min-width: 480px) {
  .container {
    width: 663px;
    height: 695px;
  }
}
@media (max-width: 480px) {
  .container {
    width: 442px;
    height: 463px;
  }
}

＆＃13;

<div class="container">
  <label for="radio1"></label><input type="radio" name="radio" id="radio1" required><br>
  <label for="radio2"></label><input type="radio" name="radio" id="radio2"><br>
  <label for="radio3"></label><input type="radio" name="radio" id="radio3"><br>
  <label for="radio4"></label><input type="radio" name="radio" id="radio4"><br>
  <label for="radio5"></label><input type="radio" name="radio" id="radio5"><br>
  <label for="radio6"></label><input type="radio" name="radio" id="radio6"><br>
  <label for="radio7"></label><input type="radio" name="radio" id="radio7"><br>
  <label for="radio8"></label><input type="radio" name="radio" id="radio8"><br>
</div>

＆＃13;

如何使图像上的多个单选按钮响应？

3 个答案: