Javascript 我怎样做一个有3种颜色和很多曲线的多重渐变背景？

我需要在CSS中实现这样的背景：

现在我做了一些类似的事情，但当然完全不是同一件事：

正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
div.divbg{
位置：绝对位置；
宽度：100%；
身高：100%；
}
#第1层{
背景#4F598A；
z指数：100；
}
#第二层{
z指数：110；
/*背景图像：线性梯度（90度，rgba（186,52,41,0）40%，rgba（186,52,41,1）100%）*/
背景图像：线性梯度（90度，rgba（186,52,41,0）43%，rgba（186,52,41,1）51%）；
/*-webkit剪辑路径：多边形（100%0、54%1%、48%12%、45%24%、45%36%、46%52%、48%71%、53%93%、75%97%、100%81%、100%53%）*/
/*剪辑路径：多边形（100%0，54%1%，48%12%，45%24%，45%36%，46%52%，48%71%，53%93%，75%97%，100%81%，100%53%）*/
/*-webkit剪辑路径：多边形（51%0、50%5%、49%12%、49%21%、50%35%、52%58%、55%82%、59%100%、80%100%、100%100%、100%0）*/
/*剪辑路径：多边形（51%0、50%5%、49%12%、49%21%、50%35%、52%58%、55%82%、59%100%、80%100%、100%100%、100%0）*/
/*过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#BA3429'，endColorstr='#BA3429'，GradientType=1）*/
/*盒影：插图943px-164px 69px 100px#4F598A*/
/*背景：红色*/
不透明度：0.8；
}
#第3层{
z指数：120；
宽度：100%；
身高：50%；
/*背景：#000！重要*/
底部：0；
内容：''；
z指数：99999！重要；
位置：绝对位置；
背景图像：-webkit线性梯度（270度，rgba（0，255，255，0）0%，rgba（94，151，73，1）100%）；
/*剪辑路径：多边形（65%7%，49%76%，2%66%，8%9%，33%3%）*/
/*过滤器：模糊（20px）*/
}

---

简单点，图片

正文{
背景图片：url(https://i.imgur.com/fUgGyru.png);
背景位置：50%50%；
背景重复：无重复；
背景大小：100%；
背景附件：固定；
} /代码> 我会考虑在上面添加一个额外的层。您将有一个底部
线性渐变
，然后在其上方有一个SVG形状，我还在其中应用了一个渐变，在底部开始的
径向渐变
上方：


.container{
宽度：400px；
高度：400px；
背景：
径向梯度（底部为100%100%，底部为#689140 20%，rgba（104、145、64、0.55）50%，透明），
url（'data:image/svg+xml；utf8'）中心/100%100%，
线性梯度（向右，#b33529 40%，#91454b）；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
弯曲方向：立柱；
颜色：#fff；
}

非常感谢！那么，我是否需要根据需要添加许多层？我怎样做这个SVG形状？因为正如您从图像中看到的，它远比您的代码复杂。提前谢谢你@Kryuko是的，您可以添加任意数量的层，以近似此值。使用CSS或SVG都无法直接获取图像，但您可以使用渐变和SVG堆叠不同类型的颜色来获取图像。谢谢，但是如何使用SVG？有什么软件可以做到这一点吗？我还在等你的回复，提前谢谢你。@Kryuko很抱歉错过了你的留言。您可以找到许多工具来构建类似SVG的图形，或者在线生成类似SVG的简单图形