如何使用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（模糊叠加）不完全位于图像上方，并且还会将图像置于屏幕的最左侧。

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