Html 应用透明度时，是否有方法匹配两个堆叠元素的颜色？

我有几张桌子叠在一起。背景色设置为红色，rgba和alpha均为0.5。从视觉上看，顶部div的颜色看起来比底部div的颜色暗。我假设这只是因为颜色理论，当增加透明度时，顶部颜色与底部颜色混合，使其看起来更暗。有没有办法使这两种颜色与某些属性或技巧相匹配？还是这样

以下是示例代码：

.main{
背景色：rgba（255,0,0,0.5）；
颜色：黑色；
高度：400px；
宽度：400px；
}
托普先生{
背景色：rgba（255,0,0,0.5）；
高度：250px；
宽度：250px；
位置：绝对位置；
顶部：10px；
}

废话

是

---

只需从下分区中删除“背景色”属性。

topper的预期行为是使不存在的元素更红，这就是为什么要设置一个半透明的红色层作为开始。不清楚你想要什么，我的意思是，为什么topper不是完全透明的？@vals这个问题有点像一个模型。我有一个元素，它有一个叠加的div元素，我有一个工具栏，允许用户更改背景颜色和透明度。因此，当我将bg颜色设置为红色并添加一些透明度时，这两个元素都将添加该颜色和透明度，就像上面的演示一样。因此，我试图实现的是-使这两个元素（即重叠的顶部元素）看起来相同，而不是两个不同的阴影。但是，为什么不将重叠元素的背景设置为完全透明？