应用透明度时,是否可以匹配两个堆叠元素的颜色?

我有几个div彼此叠放。背景颜色设置为红色,rgba和alpha均为0.5。在视觉上,顶部div的颜色看起来比底部div的颜色深。我假设这仅仅是因为颜色理论,因为顶部颜色与底部颜色混合在一起,使得在添加透明度时看起来有点暗。有没有办法使这两种颜色与某些属性或技巧相匹配?还是这样?

以下是示例代码:

.main{
 background-color: rgba(255, 0, 0, 0.5);
 color: black;
  height: 400px;
  width: 400px;
}

.topper {
  background-color: rgba(255, 0, 0, 0.5);
  height: 250px;
  width: 250px;
  position: absolute;
  top: 10px;
}
<div class="main">
  Blah
</div>
<div class="topper"></div>