如何叠加两个混合混合模式叠加

Question

我正在尝试从CSS中的灰度图像创建RGB通道叠加。

例如

图片1->背景
Image2->灰度图像，其中所有非黑色像素均应为红色（黑色=透明）
Image3->灰度图像，其中所有非黑色像素均应为蓝色（黑色=透明）

#background-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c5/Gray_scale.jpg");
  background-size: cover;
}

#foreground-img {
  background-image: url("https://blogs.mathworks.com/images/steve/166/labeled_regions_grayscale_01.jpg");
  background-size: cover;
}

.square {
  width: 800px;
  height: 800px;
  position: absolute;
}

.overlay {
  mix-blend-mode: color;
}

.overlay2 {
  mix-blend-mode: multiply;
}

#red {
  background: red;
}

#blue {
  background: blue;
  transform: rotate(90deg);
}

<div>
  <div id="background-img" class="square"></div>
  <div id="red" class="square overlay">
    <div id="foreground-img" class="square overlay2">
    </div>
  </div>
  <div id="blue" class="square overlay">
    <div id="foreground-img" class="square overlay2 "></div>
  </div>
</div>

它适用于一个叠加层（例如红色），但是一旦我添加了蓝色div，红色div就不再可见。