html怎么混合颜色,在CSS中为背景混合两种颜色

我想把两种颜色一个叠在另一个上面。我通过创建并保存两个div来做到这一点，其中一个在顶部，不透明度为60%。我想知道是否有一个更简单的方法，只需要一个div和两种颜色，或者只有一种颜色，这两种颜色的混合。

我在这里张贴我的代码，如果你注意到任何不好的做法请告诉我。我渴望提高我的技能。

null* {

padding: 0;

margin: 0;

border: 0;

box-sizing: border-box;

}

/* ~~~~~~~~~~SKY~~~~~~~~~~ */

#sky {

position: relative;

z-index: -100;

width: 100vw;

height: 100vh;

background-image: linear-gradient( to top, midnightblue, black);

}

/* ~~~~~~~~~~MOON~~~~~~~~~~ */

.moon {

position: absolute;

top: 3%;

right: 0%;

width: 200px;

height: 200px;

border-radius: 50%;

}

#dark-moon {

background-color: silver;

}

#light-moon {

background-color: goldenrod;

background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);

background-size: 60px 60px;

background-position: 0 0, 30px 30px;

opacity: 60%;

}

/* ~~~~~~~~~~SEA~~~~~~~~~~ */

#sea {

position: absolute;

bottom: 0%;

width: 100vw;

height: 25vh;

background-color: #48B;

}

null

正如你所看到的，银色的月亮上有一个金色的月亮。只有一个月亮，我怎么能得到同样的结果呢？