CSS防止背景颜色在重叠的div中组合

Question

现在我有两个div相互重叠。一个父母，一个孩子。一个div有。dark属性，另一个div有。sidedrawer属性。当我重叠这两个div时，背景颜色合并成我不想要的颜色。我想防止颜色混在一起。

.dark {
background-color: rgba(0, 0, 0, 0.87);
color: #ddd;
transition: all 0.5s ease-in-out;
--main-background: rgba(0, 0, 0, 0.87);
--panel-background: #37374d;
--modal-background: #37374d;
--text: #ddd;
--invert: invert(1);
--btn-background: #f2f2f2;
--modal-hover: #37374d;

}
.sidedrawer {
position: fixed;
top: 0;
bottom: 0;
width: 170px;
left: -170px;
background-color: #37374d;
z-index:99;
}

当这两个div被放置在彼此的顶部时，背景色似乎结合成一个更暗的颜色版本。有没有一种方法可以让div重叠在一起而不需要颜色组合?这只是一个一般的css问题，不是关于特定场景的问题。

Answer 1

根据我的理解，你只需要将其不透明度设置为1(相当于100%)。

.dark {
background-color: rgba(227, 61, 148, 1);
color: #ddd;
width: 400px;
height: 400px;
transition: all 0.5s ease-in-out;
}
.sidedrawer {
width: 400px;
height: 20px;
background-color: #37374d;
z-index:99;
}

<div class="dark">
<div class="sidedrawer"></div>
</div>

或者，如果你想要合并颜色，你可以将基础设置为不透明度为1，并使用较小的

.dark {
background-color: rgba(227, 61, 148, 1);
color: #ddd;
width: 400px;
height: 400px;
transition: all 0.5s ease-in-out;
}
.sidedrawer {
width: 400px;
height: 20px;
background-color: rgba(4, 59, 92, 0.5);
z-index:99;
}

<div class="dark">
<div class="sidedrawer"></div>
</div>