为什么 CSS mix-blend-mode "darken" 产生的结果与 Photoshop 不同？

Question

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

例子

青色矩形 (#00ffff) 半重叠红色矩形 (#ff0000)。青色矩形的混合模式设置为 "darken"。因为 "darken" 为重叠像素选择每个通道 (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>

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.^ref

为什么 CSS mix-blend-mode "darken" 产生的结果与 Photoshop 不同？

Why does CSS mix-blend-mode "darken" produce a different result than Photoshop?

css

mix-blend-mode