渐变中的 CSS 渐变答案

【问题标题】：CSS Gradients Inside Gradients渐变中的 CSS 渐变
【发布时间】：2018-09-14 14:02:49
【问题描述】：

是否可以使用渐变作为渐变中的一种颜色？

出于我的特定目的，我有一个从左到右的初始渐变：

linear-gradient(to right, red, darkgray);

但我希望深灰色部分实际上是从上到下的渐变：

linear-gradient(to bottom, darkgray, white);

我尝试了我希望工作的代码：

linear-gradient(to right, red, linear-gradient(to bottom, darkgray, white));

但这似乎不起作用，我还没有看到有人写过渐变中渐变的可能性。

编辑：这是不可能的 [CSS 渐变是图像，不能用作其他渐变中的颜色]，但@hungerstar 在下面有一个很好的解决方法：在另一个渐变上叠加一个带有透明度的渐变。

【问题讨论】：

当然不是......但你可以考虑多个渐变。作为旁注，渐变不是颜色，而是图像，因此没有逻辑在此处使用它
@TemaniAfif 我不明白你的意思。您的意思是在相同的初始左到右轴上添加其他颜色吗？好吧，如果不可能，我想我不走运。谢谢
我的意思是你可以有多个渐变jsfiddle.net/4t2kx22b/1，如果你知道如何使用它们，你可以实现你所需要的
@TemaniAfif 我明白你的意思。不幸的是，我认为这种方式不可能达到预期的效果，因此需要图像编辑软件。感谢回复
好吧，但是如果您与图像编辑器分享您获得的结果，我们可能会找到一些解决方法；）因为一切都可以通过渐变实现

标签： css colors gradient linear-gradients

【解决方案1】：

渐变内的渐变是不可能的。

话虽如此，看看这个。由于渐变是分层的，因此您必须使用 rgba() 为颜色设置一些透明度，以允许后面的渐变通过上面的渐变显示。

也许是这样的？

body {
  margin: 0;
  height: 100vh;
  background:
    linear-gradient( to right, rgba(255, 0, 0, 0.5), rgba( 169, 169, 169, 0.5 ) ),
    linear-gradient( to bottom, darkgray, white );
}

【讨论】：

哦，真的。我不敢相信我没有想到这一点......希望我能给你和@Axnyff 答案点，但从技术上讲，他的答案是否定的似乎是正确的。但是，非常感谢这个解决方法！
@JMcFar 正如我所说，我们可以组合多个渐变并做一些魔术;)
@hungerstar 我做了，但他们不会让声誉低于某一点的用户的投票影响这个数字。我肝碎了
@JMcFar 啊是的，你只有 3 个代表，:(

【解决方案2】：

不，这是不可能的。

The syntax for a gradient is:

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

而线性渐变不会创建颜色，而是创建图像。

【讨论】：

;(感谢您为我解决这个问题。我想这需要在图像编辑软件中完成。（显然我需要等待 5 分钟才能接受您的回答，我会在可以的时候这样做)