我想創造一個多色彩的& quot自由流動& quotCSS漸變背景。它應該是這樣的:

看來我需要使用背景混合模式。例如屏幕:

背景-混合-模式:屏幕；

漸變有五種顏色:

答:#ecedee 乙:#fff0be C: #fbdce7 D: #e2fae1 E: #d3d5ed

我能找到的最接近的解決方案是& quot光譜背景& quot在這篇博文中

.spectrum-background {
    background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
}

但是我不知道如何添加更多的顏色和位置，就像附上的圖片。希望有人能幫忙。

你當然可以添加更多的漸變和顏色，但混合模式的棘手之處在于:當不透明的顏色重疊時，屏幕會變成白色。

我發現只使用漸變更容易，不需要混合。以下是我能想到的符合你期望的結果的方法:

.spectrum-background {
    width: 500px;
    height: 1000px;
    background:
        linear-gradient(150deg, #ecedee, transparent 30%),
        linear-gradient(330deg, rgb(210, 206, 242), transparent 30%),
        linear-gradient(225deg, #fff0be, #fbdce7, #e2fae1, powderblue);
}

<div class="spectrum-background"></div>