图片中的多个复选框答案

【问题标题】：Multiple Checkboxes in a Picture图片中的多个复选框
【发布时间】：2016-12-01 09:25:47
【问题描述】：

我知道如何将图片放在一个复选框中（通过 css）

但是这个例子：

我想将复选框放入图片中每个数字的确切位置。复选框也可以在图片旁边，但在确切的位置。

我们如何做到这一点？

感谢您的帮助

【问题讨论】：

标签： php html css checkbox

【解决方案1】：

您想将复选框定位在绝对位置吗？您可以在 css 中使用absolute：

div.container {
  position: relative;
}
.chk1 {
  position: absolute;
  left: 50px;
  top: 50px;
}
.chk2 {
  position: absolute;
  left: 65px;
  top: 65px;
}
.chk3 {
  position: absolute;
  left: 80px;
  top: 80px;
}

<div class="container">
  <img src="https://i.stack.imgur.com/aS3WP.jpg" />
  <input type="checkbox" class="chk1" />
  <input type="checkbox" class="chk2" />
  <input type="checkbox" class="chk3" />
</div>

您可以更改 left 和 top 值，将它们设置在您想要的正确位置。

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.pic{
background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat;
width:242px;
height:197px;
position: relative;
}
.poin1{
left: 165px;
bottom:50px;
position: absolute;
}
.poin2{
left: 165px;
bottom:90px;
position: absolute;
}
.poin3{
left: 155px;
bottom:125px;
position: absolute;
}
.poin4{
left: 180px;
bottom:122px;
position: absolute;
}
</style>
</head>
<body>

<div class="pic">
<input type="checkbox" class="poin1">
<input type="checkbox" class="poin2">
<input type="checkbox" class="poin3">
<input type="checkbox" class="poin4">

</div>


</body>
</html>



    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .pic{
    background: url("https://i.stack.imgur.com/aS3WP.jpg") no-repeat;
    width:242px;
    height:197px;
    position: relative;
    }
    .poin1{
    left: 165px;
    bottom:50px;
    position: absolute;
    }
    .poin2{
    left: 165px;
    bottom:90px;
    position: absolute;
    }
    .poin3{
    left: 155px;
    bottom:125px;
    position: absolute;
    }
    .poin4{
    left: 180px;
    bottom:122px;
    position: absolute;
    }
    </style>
    </head>
    <body>

    <div class="pic">
    <input type="checkbox" class="poin1">
    <input type="checkbox" class="poin2">
    <input type="checkbox" class="poin3">
    <input type="checkbox" class="poin4">

    </div>


    </body>
    </html>

【讨论】：