梯度中的梯度？

Question

好吧，我不知道这是否可能，只是我的代码出了点问题……

那么，我试着在一个渐变中创建一个线性渐变？

background: -webkit-linear-gradient(top, #9DB2F0 0%, #9DB2F0 40%, -webkit-linear-gradient(left, red 0%, yellow 100%) 40%)

如果可能，请告诉我是否做错了什么，或者是在哪个浏览器中可能做错了什么。

Answer 1

渐变是image values，而不是color values。因为CSS3中的渐变只使用色标，所以你不能像那样嵌套它们。

你会想要找到一个渐变或图像编辑器，它可以帮助你可视化最终的渐变是什么样子(因为我不知道你想要它是什么样子)，这可能会为你生成相应的单一线性渐变。

但在我看来，它看起来像是一个多方向的梯度。在这种情况下，你要么使用layered backgrounds (每层一个渐变)，要么使用实际的图像。

Answer 2

只需添加到@BoltClock，回答一些你可以尝试的技巧：

正如他在回答中所说的那样，

• 具有分层的背景。它是用多个背景“图像”(渐变)完成的。每一个都可以通过以下方式进行控制：

背景-位置:左中右上；背景-重复:重复，不重复；

如果你有两个图像/渐变，你想要style.

• gradients添加到:before和:after伪。你可以在你想要的地方设置这些伪对象的大小和位置(并且你必须:绝对定位，在主背景和实际内容之间放置一些z-index，等等)。例如，请看我之前的答案和小提琴：Showing two different gradients as a background using CSS?

似乎你不能通过content: url() url()添加渐变，只能添加图像(url()的任何有效值)。而且通过content添加的内容不能作为真实的背景(重复，位置)进行控制，所以即使它有效，也不是最通用的方法。