css如下

.code_box{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%,50%);
width: 374px;
height: 57px;
padding: 0 28px;
background: #fff;
border-radius: 28px;
font-size: 24px;
color: #999;
display: flex;
justify-content: space-between;
align-items: center;
}
.code_box::after{
content: "";
display: block;
position: absolute;
width: 320px;
height: 18px;
border-radius: 39px;
bottom: 0;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 10px 20px 5px #966932;
opacity: 0.2;
}

当我把父盒子设置为背景#FFF的时候，下面的after加了阴影会有白色，设置背景为透明也不行。
但是我把父盒子设置为背景有颜色的背景时候，例如#c9a956，下面的白色会叠加到父盒子下面不可见，这是为什么呢？
怎么解决这个问题？