如何使用HTML和CSS修复图像上的叠加层

我一直在研究标记图像的代码。代码所面临的问题是,当我开始标记图像时,在图像上会出现一个覆盖层,但是覆盖层的位置并不恰好位于图像上。

我尝试将位置设置为相对和绝对,但是仍然出现问题。

我在下面附上了Jfiddle:

jsfiddle.net

如果您看到代码,则图像存在于imgarea中,并且CSS属性为:

 .imagearea {
    display: flex;
    flex-direction: column;
    float: left;
    width: 35%;
    position: absolute;
  }

在图像选择区域-overlay中:

 .select-areas-overlay {
  background-color: #000;
  overflow: hidden;
  position: absolute;
  }

The picture below shows the problem I am facing enter image description here

如果您看到图片,则overlay(模糊叠加)不完全位于图像上方,并且还会将图像置于屏幕的最左侧。

有人可以帮助我解决此问题,以修复图像的此位置及其上的覆盖物。

评论