为什么 CSS 混合模式“变暗”会产生与 Photoshop 不同的结果？

Question

据我了解，CSS 的 mix-blend-mode 应该与 Photoshop 的混合模式具有相同的行为方式。但是，在下面的简单示例中，我得到了不同的结果，我不知道为什么。

示例

青色矩形 (#00ffff) 与红色矩形 (#ff0000) 重叠一半。青色矩形的混合模式设置为“变暗”。因为“变暗”为重叠像素选择每个通道 (RGB) 中最暗的部分，并且所有三个通道在两个矩形中的至少一个中为 0，所以我希望重叠区域为黑色。

在 Photoshop 中生成结果

（为清楚起见，勾勒出青色矩形）

• 青色矩形在黑色背景上不可见（预期）
• 重叠区域也是黑色的（预期）

网络上的结果（最新的 Chrome，70.0.3538.102）

• 青色矩形在黑色背景上可见（不是预期的）
• 重叠区域是暗的 (#2d0c1b)，但不是黑色（不是预期的）

现场示例：CodePen

那么...为什么结果不一样？我错过了什么？

Answer 1

结果相同，但黑色背景应用于body，而不是应用mix-blend-mode 的元素的父元素。

将黑色背景移到那里将解决问题：

body {
  background: black;
}
.group {
 background:#000;
}
.a, .b {
  width: 200px;
  height: 100px;
}

.a {
  background: #00ffff;
}

.b {
  background: #ff0000;
  margin-top: -50px;
  mix-blend-mode: darken;
}

<div class="group">
  <div class="a"></div>
  <div class="b"></div>
</div>

mix-blend-mode CSS 属性设置元素的内容应该如何与元素的父元素的内容和元素的背景混合。^ref