css - 如何实现部分透明的 CSS 覆盖？

Question

这就是我想要的：

我有一个扫描仪组件（回放相机所看到的内容），但我需要以某种方式将其包裹起来，以在屏幕中央直接创建一个带有透明矩形的半透明覆盖层。

如何才能做到这一点？

标签： cssreactjsuser-interfaceoverlay

Answer 1

您可以使用clip-path.

您可以通过编辑来调整高光的尺寸

style="--left: 30%; --top: 30%; --width: 40%; --height: 40%;"

.frame元素的一部分。

.frame {
  position: relative;
  display: inline-block;
}

.frame::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  
  clip-path: polygon(
    0% 0%, 
    0% 100%, 
    var(--left) 100%,
    var(--left) var(--top),
    calc(var(--left) + var(--width)) var(--top),
    calc(var(--left) + var(--width)) calc(var(--top) + var(--height)),
    var(--left) calc(var(--top) + var(--height)),
    var(--left) 100%,
    100% 100%,
    100% 0
  );
}

<div class="frame" style="--left: 30%; --top: 30%; --width: 40%; --height: 40%;">
  <img src="https://picsum.photos/id/16/640/320" />
</div>