CSS渐变内嵌渐变

Question

是否可以在渐变中使用另一个渐变作为其中一种颜色？

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

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在下面提供了一个很好的解决方法：在另一个渐变上叠加具有透明度的渐变。

- JMcFar

---

当然不是...但你可以考虑多个渐变。顺便提一下，渐变不是颜色，而是图像，因此在那里使用它是没有逻辑的。 - Temani Afif

@TemaniAfif，我不知道你的意思。你是指在相同的初始从左到右轴上添加其他颜色吗？如果不可能的话，我想我就没戏了。谢谢。 - JMcFar

我是说你可以有多个渐变 https://jsfiddle.net/4t2kx22b/1/，如果你找到如何使用它们，你可能会达到你需要的效果。 - Temani Afif

@TemaniAfif 我明白你的意思。不幸的是，我认为这种期望效果无法通过此方式实现，需要使用图像编辑软件。感谢您的回复。 - JMcFar

通常来说，为了执行这种类型的操作，我会使用“伪元素”，例如：div { linear-gradient(...) } 和 *div::before { linear-gradient(...) }*，并且我会在高度或宽度上进行补偿（当然取决于我想要渐变的位置）。 - gleisin-dev

Answer 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 );
}

- hungerstar

---

哦，没错。我简直不敢相信我没有想到那个……真希望我能把答案点给你和@Axnyff，但他似乎在技术上是正确的，答案是否定的。不过，非常感谢你提供的这个解决方法！ - JMcFar

@JMcFar 如我所说，我们可以结合多个渐变并进行一些魔法操作 ;) - Temani Afif

@hungerstar 我投了，但是他们不允许声望低于一定点数的用户的投票影响数量。我被削成了肝末。 - JMcFar

@JMcFar 啊，是的，你只有3点声望，:( - hungerstar

Answer 2

不，这是不可能的。 渐变的语法为： linear-gradient。

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> ]?

线性渐变并不会创建一种颜色，它创建的是一张图片。

- Axnyff

---

谢谢你为我澄清这个问题。我想这需要在图像编辑软件中完成。(显然我需要等待5分钟才能接受你的答案，我会在可以的时候这样做) - JMcFar