Css 我如何在多个方向上形成梯度流?

Css 我如何在多个方向上形成梯度流?,css,svg,gradient,linear-gradients,Css,Svg,Gradient,Linear Gradients,我想通过使用渐变来创建环境光效果 在css3中,可以让渐变从上到下,从下到上,从左到右或从从右到左移动,并且可以使用多种颜色。但只有一个方向 我想结合图像的4个区域,通过计算每个区域的平均或主色调,然后使用渐变为图像创建背景 我曾考虑过使用多重渐变,但如果创建一个ac渐变和另一个bd渐变并将两者都放在图片后面,效果会不太好。(我标出了关键区域。) 你知道怎么做吗 编辑:我不想在渐变之间混合颜色,如图中所示。我对所有颜色之间的平滑浮动感到满意 EDIT2:我在这里上传了我的问题演示: Edit3

我想通过使用渐变来创建环境光效果

在css3中,可以让渐变从
上到下
从下到上
从左到右
或从
从右到左
移动,并且可以使用多种颜色。但只有一个方向

我想结合图像的4个区域,通过计算每个区域的平均或主色调,然后使用渐变为图像创建背景

我曾考虑过使用多重渐变,但如果创建一个ac渐变和另一个bd渐变并将两者都放在图片后面,效果会不太好。(我标出了关键区域。)

你知道怎么做吗

编辑:我不想在渐变之间混合颜色,如图中所示。我对所有颜色之间的平滑浮动感到满意

EDIT2:我在这里上传了我的问题演示:

Edit3:我们已经了解到,这不能通过CSS3实现,但可以通过SVG实现。经过仔细研究,我发现了这张照片:


因此,我将使用一个彩色圆圈,如图中所示。

您是否尝试过它的免费功能,您可以用它做很多事情。希望这能有所帮助。

如果我不理解这个问题,请原谅,但我相信你想要的是矩形渐变。不幸的是,SVG不支持这一点。你能得到的最接近的是有多个线性渐变,其中一些alpha淡出,而后面是另一个线性渐变淡入

在2020年,考虑到新的渐变和遮罩,您有更多的可能性实现您想要的

使用
conic-gradient()

html{
最小高度:100%;
背景:圆锥形梯度(从45度,红色,蓝色,绿色,黄色,红色);

}
您是否尝试过使用径向渐变?这是同样的事情。只能将颜色从中心更改为边框。你不能改变颜色的角度,这将解决我的问题顺便说一句…这是一个好主意,但我不认为它可以与CSS完成。我要么使用图像,要么画渐变到画布上,让画布渲染它。把它画到画布上就可以了,你知道有没有这样的JS代码?你可以考虑SVG。我已经很久没有做矢量图形了,但是你可以找到一个简单的公式来绘制弧度来完成360度渲染。每个弧度可以从一种颜色开始,一种颜色在中心点,另一种颜色在终点,形成一种混合。唯一需要注意的是,您需要极高的分辨率才能生成原始图像并将其保存到位图中。它们提供了一个渐变生成器,但与此问题无关。;)另外夜猫子2已经给出了正确的答案很好的答案!我稍后会调查:)