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

Question

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

示例

青色矩形（＃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 < / p>