如何用mask-mode: luminance实现阶梯效果？为何多图层蒙版不符合预期？

你忽略的核心逻辑：蒙版图层的「独立Alpha合成」而非「颜色混合」 #

你误解了多图层蒙版的工作方式：当使用多个图层作为mask-image并设置mask-mode: luminance时，不是先把所有图层的颜色混合成一张图再转成亮度蒙版，而是每个图层单独转换为Alpha通道，再按规则合成这些Alpha通道。

这也是规范中“蒙版图层”的核心含义——每个图层都是独立的蒙版源，依次参与Alpha计算，而非先做颜色叠加。

具体原理拆解 #

1. 单图层的luminance蒙版转换：每个图层的颜色会被提取亮度值（L = (R + G + B) / 3），直接对应为蒙版的Alpha值：
   • 纯黑（亮度0）→ Alpha=0（完全透明）
   • 纯白（亮度1）→ Alpha=1（完全不透明）
   • 灰色（亮度0.5）→ Alpha=0.5（半透明）
2. 多图层的Alpha合成规则：多个蒙版图层的Alpha通道会按照mask-composite的规则合成（默认值为source-over，即常规的Alpha混合），公式为：

   最终Alpha = 当前图层Alpha + 已合成Alpha × (1 - 当前图层Alpha)
   

你的场景为什么出现棋盘格（半透明） #

假设你的蒙版由两个渐变图层组成，比如一个是对角线以上纯黑、以下纯白，另一个是对角线以上纯白、以下纯黑：
按默认source-over合成后，对角线以上区域会先应用第一个图层的Alpha=0，再叠加第二个图层的Alpha=1，最终Alpha为1（完全不透明）；但如果你的渐变带有过渡区域，过渡部分的亮度值为0.5，两个图层的过渡区域合成后Alpha会接近0.5，就会呈现半透明的棋盘格效果。

核心问题在于：你以为“只要某层蒙版是纯黑，对应区域就会透明”，但实际上多图层蒙版是多个Alpha通道的合成结果，单个图层的纯黑不会直接覆盖后续图层的纯白，最终Alpha由所有图层共同决定。

验证方法 #

你可以拆分蒙版图层单独测试：

• 只保留第一个渐变作为mask-image，观察元素透明效果
• 只保留第二个渐变作为mask-image，观察元素透明效果
• 对比两者合成后的结果，就能直观看到Alpha合成的影响

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