什么 CSS 亮度滤镜值对应于给定的半透明黑色叠加层以使图像变暗？

Question

这个问题是自我回答，遵循“为了他人和未来的自己的利益而公开记录”的精神

半透明的黑色覆盖层是一种流行的“使图像变暗”的方法；但考虑到最后一个 IE 版本的支持不久前就结束了，并且所有现代浏览器都支持 filter: brightness(...)，我们现在可以放弃这种繁琐的方法，并用一行 CSS 替换它。

但是，黑色覆盖面纱的不透明度或 Alpha 通道值与滤镜函数的亮度值之间的相关性究竟如何，才能产生完全相同的视觉外观？

这是两种方法的示例：

.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;  // these two lines could be replaced by using a background color
  opacity: 0.5;               // with an alpha channel: #0000007F is black at 0.5 opacity
}

.darken {
  filter: brightness(0.5);
}

<fieldset class="container">
  <legend>using overlay</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>using filter</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>

Answer 1

替换以下样式

.veil {
  background-color: #000000BF;
}

我们会设置过滤器

.darken {
  filter: brightness(0.25);
}

表

告诉我们，Alpha 通道BF对应于（面纱的）75% 的不透明度，因此对应于 25% 的亮度。