如何取消透明容器内元素的全局背景opacity遮罩效果？

需求场景 #

实际项目里有个背景视频在播放，整个视频上面盖了一层rgba(0,0,0,0.2)的半透明遮罩来调暗画面。视频上方还有个透明表盘（示例里用方块代替），要求表盘内部能透出没被遮罩暗化的原始视频，不能直接给表盘设背景色，得靠透出来的底层视频显示。示例里用纯黑背景模拟视频，要实现方块区域显示纯黑（不能直接设方块背景）。

解决方案 #

用CSS混合模式配合伪元素就能搞定，步骤很简单：

1. 容器背景设成原始内容（示例里是纯黑，对应实际的背景视频）
2. 给容器加个伪元素，用它来实现全局的半透明遮罩
3. 给方块设置混合模式，抵消遮罩的暗化效果

修改后的代码示例 #

CSS代码

.container{
  height: 100vh;
  width: 100vw;
  background-color: #000; /* 原始背景，对应实际场景的视频 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 用伪元素实现全局遮罩 */
.container::before{
  content: '';
  position: absolute;
  inset: 0; /* 等价于top/left/right/bottom都设为0 */
  background-color: rgba(0,0,0,0.2);
  z-index: 1;
}

.square{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: relative;
  z-index: 2;
  /* 混合模式抵消遮罩，透出原始背景 */
  mix-blend-mode: lighten;
}

HTML代码

<div class="container">
  <div class="square"></div>
</div>

原理说明 #

• 伪元素覆盖整个容器，实现了全局的暗化效果，不影响底层的原始背景
• 方块的mix-blend-mode: lighten会取遮罩和原始背景中更亮的颜色显示：遮罩是半透明黑（比纯黑亮），所以最终会显示原始的纯黑背景，刚好符合需求
• 实际项目里把容器背景换成视频（比如用<video>作为背景元素），效果完全一致

内容的提问来源于stack exchange，提问作者Leviathan