半透明黑色遮罩调暗图片对应的CSS brightness滤镜值是多少？

半透明黑色遮罩是图片调暗的常用方法，如今所有现代浏览器都支持filter: brightness(...)，完全可以用这行简洁的CSS代码替代繁琐的遮罩层实现。

要让两种方式达到完全一致的视觉效果，黑色遮罩的不透明度（α）和brightness滤镜的参数值（β）满足以下对应关系：

β = 1 - α
等价于：α = 1 - β

比如遮罩opacity: 0.3时，对应brightness(0.7)；brightness(0.4)则对应遮罩opacity: 0.6。

实现示例 #

CSS代码 #

.container {
  padding: 0;
  position: relative;
  width: 100px;
  height: 100px;
}

.image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* 黑色遮罩实现 */
.veil {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #000000;
  opacity: 0.5; /* 等价于带Alpha通道的颜色：#0000007F */
}

/* brightness滤镜实现 */
.darken {
  filter: brightness(0.5);
}

HTML代码 #

<fieldset class="container">
  <legend>使用遮罩层</legend>
  <img class="image" src="https://images.unsplash.com/photo-1726853546098-380e29da9e31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
  <div class="veil"></div>
</fieldset>

<fieldset class="container">
  <legend>使用brightness滤镜</legend>
  <img class="image darken" src="https://images.unsplash.com/photo-1726853546098-380e29da9e31?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
</fieldset>

原理说明 #

黑色遮罩在默认normal混合模式下，颜色计算逻辑为：
最终像素RGB值 = 原图RGB值 × (1 - 遮罩不透明度) + 黑色RGB值 × 遮罩不透明度
由于黑色RGB值为0，简化后为：最终像素值 = 原图像素值 × (1 - α)

而brightness(β)滤镜的作用是将每个像素的RGB通道值直接乘以参数β，即：最终像素值 = 原图像素值 × β

要让两者视觉效果完全一致，只需让1 - α = β，这就是两者的核心对应关系。

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