在Img -角上的6个Div

Question

我有一个汽车图像，我想有6个div以上的图像，我可以选择用鼠标。例如，如果我用鼠标单击div，这个div将改变颜色。我已经尝试过z索引了，但是要么它不适用于z索引，要么我做错了

我有什么现状

<img class="col-lg-12" [src]="data.car" />

但我需要这个：我所需要的

在这个项目中，我想通过选择div来选择汽车的哪一部分有损坏。

Answer 1

您可以将标记(Div)放置在带有absolute位置的图像上。这是我的片段：

CSS

.container {
  border: 1px solid #DDDDDD;
  width: 200px;
  height: 200px;
  position: relative;
}

img{
  width: inherit;
  height: inherit;
}
.tag {
  float: left;
  position: absolute;
  width: 33%;
  height: 50%;
  z-index: 1000;
  border: 1px solid green;
}

.row-1{
  top: 0px;
}

.row-2{
  top: 50%;
}

HTML

<div class="container">
  <div class="tag row-1" style="left:0%;"></div>
  <div class="tag row-1" style="left:33%;"></div>
  <div class="tag row-1" style="left:66%;"></div>

  <div class="tag row-2" style="left:0%;"></div>
  <div class="tag row-2" style="left:33%;"></div>
  <div class="tag row-2" style="left:66%;"></div>

  <img src="https://www.autotrader.co.uk/home-pages/images/static/covid-panel/red-car-v2.png">
</div>

你可以解决这个问题更复杂，但我现在没有时间在这方面。另外，如果您想获得div (例如ViewChild)，您可以设置id或一些可识别的标记。如果你有什么问题告诉我。更多关于职位

结果

​

​