屏幕的其余部分随着中央显示而变暗

Question

我正在尝试创建一个图像捕获页面。目前我利用javascript利用网页摄像头并在页面上显示。但是我希望整个屏幕在没有暗影效果的情况下变暗。我知道不透明，一旦应用，所有孩子都会受到影响。

所以我想知道是否有办法创造我的愿望？

Answer 1

一种选择是为您的页面创建一个全新的叠加层，使用Flexbox将div放在中心，使垫片变暗，如下所示：

.container-outer {
  display: flex;
  flex-flow: column nowrap;
  
  margin: 0;
  padding: 0;
  
  width: 500px;
  height: 400px;
}

.container-inner {
  flex: 0 0 auto;
  display: flex;
  
  margin: 0;
  padding: 0;
}

.content {
  flex: 0 0 auto;
  
  width: 200px;
  height: 200px;
}

.spacer {
  flex: 1 1 auto;
  
  background-color: #888888;
}

<div class="container-outer">
  <div class="spacer"></div>
  <div class="container-inner">
    <div class="spacer"></div>
    <div class="content">
    
      <!-- CENTERED CONTENT HERE -->
      
    </div>
    <div class="spacer"></div>
  </div>
  <div class="spacer"></div>
</div>

如果您在现有页面上绘制此效果，您甚至可以将filter: blur;效果应用于.spacer课程。在这种情况下，我会让垫片透明。

Answer 2

您可以创建如下的叠加层：

.overlay{
  position: fixed;
  top:0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  z-index: 2;
  justify-content: center;
}

HTML code：

<div class="overlay">
  <div>
    Your content
  </div>
</div>