我想把兩種顏色一個疊在另一個上面。我通過創建并保存兩個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

正如你所看到的，銀色的月亮上有一個金色的月亮。只有一個月亮，我怎么能得到同樣的結果呢？

總結

以上是生活随笔為你收集整理的html怎么混合颜色,在CSS中为背景混合两种颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。