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

Question

这是我想要的东西：

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

如何做到这一点？

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>

Answer 2

您可以使用 border 生成 'overlay' 部分 - 这样您就有了一个真正的 'transparent' 块，可以使它之外的所有内容变暗。诀窍是让边框延伸到元素（或屏幕）的边缘 - 您可以通过以视口单位指定边框宽度来做到这一点，如下所示：

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.container img{
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loupe {
  width: 24rem;
  height: 18rem;
  border: 0 solid rgba(0,0,0,0.5);
  border-width: 50vh 50vw;
  position: absolute;
  top: -9rem; /* Half of height */
  bottom: 0;
  right: 0;
  left: -12rem;  /* Half of width */
  margin: auto;
}

/* Optional - apply a shadow effect under the loupe */
.loupe::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0.1rem 1.5rem rgba(0,0,0,0.25);
}

    <div class="container">
      <img src="https://images.unsplash.com/photo-1621135177072-57c9b6242e7a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80"/>
      <div class="loupe">
      </div>
    </div>

如果需要微调放大镜的位置，可以使用transform: translate();调整位置。

Answer 3

与“边框”解决方案类似，您可以使用内嵌框阴影，一些有效。

.wrap {
  position: relative;
}

.wrap::before {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-shadow: inset 0 0 0 150px rgb(0 0 0 / 70%);
  content: '';
}

body {
  margin: 0;
}

<div class="wrap">
  <img src="https://www.fillmurray.com/1000/1000">
</div>

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

How to implement a CSS overlay which is partially transparent?

css

user-interface

overlay

reactjs