如何在Bootstrap图像叠加中显示多个刻度标记

Question

我希望图像上覆盖有白色的刻度标记（因为它被选中），我的桌子上有很多多个图像，实际上我真的不知道怎么做，看看我的代码，它不能像我附加的图像那样，并点击图像不能点击另一个图像，  请帮我解决这个问题

我需要这样

＆＃13;

＆＃13;

img {
    border-radius: 50%;
   
}

.caption {
  position: absolute;
  top: 0;
  left: 5px;                            /*  changed to match image_grid padding  */
  height: 100%;
  width: calc(100% - 5px);              /*  changed to match image_grid padding  */
  padding: 0 10px;
  box-sizing: border-box;
  pointer-events: none;
}

.imageandtext {
  position: relative;
}
.image_grid {
  display: inline-block;
  padding-left: 5px;
}
.image_grid img {                       /*  added rule  */
  display: block;
}

.image_grid input {
  display: none;
}
.image_grid input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 20px;
  text-align: center;
  border: 1px solid white;
  border-radius: 50%;
}

＆＃13;

<div class="grid-two imageandtext">

  <div class="imageandtext image_grid">
    <label for="selimg1">
  <img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
    </label>
    <input type="radio" name="selimg" id="selimg1">
    <div class="caption">
   
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

谢谢，

Answer 1

您需要将输入作为复选框来选择多个项目。单选按钮用于仅选择一个项目。这对你有用：

＆＃13;

＆＃13;

img {
    border-radius: 50%;
   
}

.caption {
  position: absolute;
  top: 0;
  left: 5px;                            /*  changed to match image_grid padding  */
  height: 100%;
  width: calc(100% - 5px);              /*  changed to match image_grid padding  */
  padding: 0 10px;
  box-sizing: border-box;
  pointer-events: none;
  border-radius:500px;
}

.imageandtext {
  position: relative;
}
.image_grid {
  display: inline-block;
  padding-left: 5px;
}
.image_grid img {                       /*  added rule  */
  display: block;
}

.image_grid input {
  display: none;
}
.image_grid input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 20px;
  text-align: center;
  border: 1px solid white;
  border-radius: 50%;
}

＆＃13;

<div class="grid-two imageandtext">

  <div class="imageandtext image_grid">
    <label for="selimg1">
  <img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
    </label>
    <input type="checkbox" name="selimg" id="selimg1">
    <div class="caption">
   
    </div>
  </div>
  
  <div class="grid-two imageandtext">

  <div class="imageandtext image_grid">
    <label for="selimg2">
  <img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
    </label>
    <input type="checkbox" name="selimg" id="selimg2">
    <div class="caption">
   
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;