CSS - 除了矩形叠加外，使图像变暗

Question

我有一个<img>，我想突出显示某个区域，如下所示：

我试图想办法用CSS而不是JS来创建以下效果。我原本打算使用嵌入式边框，但我需要能够使用百分比来显示位置（例如，突出显示区域的左上角是左边50％，右边80％）和框的大小并且border-box似乎只能获取px值。如果图像大小发生变化，我可以使用JS继续调整所有内容的大小，但我不想这样做。

有什么想法吗？

Answer 1

您可以在里面创建一个Person (StudentEnroll) is not associated to Course元素div。然后在img上使用pseudo-element div，box-shadow，position-absolute

div {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
div:after {
  content: '';
  position: absolute;
  bottom: 5%;
  left: 20%;
  width: 40%;
  height: 50%;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.6);
}

<div><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"></div>

Answer 2

也许尝试创建4个框，使图像的所有边都重叠，尽可能多地重叠。将框颜色设置为带透明度的黑色，并根据需要调整它们的大小。这些盒子将位于原始图像的顶部。