css - 在css中混合颜色时忽略某些元素

Question

可以不混合绿色和蓝色吗？

我的意思是蓝框应该忽略绿框，只与红框混合颜色

我尝试了混合混合模式，但没有帮助

div {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}
.green {
  background-color: green;
  margin-top: -50px;
  opacity: 0.5;
}
.blue {
  background-color: blue;
  margin-top: -125px;
  margin-left: 25px;
  opacity: 0.5;
}

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

更新：期望的结果