css - 渐变中的渐变？

Question

好吧，我不知道这是否可能，只是我的代码有问题......

那么，我尝试在渐变中制作线性渐变？

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

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

Answer 1

渐变是图像值，而不是颜色值。由于 CSS3 中的渐变仅使用色标，因此您不能这样嵌套它们。

您需要找到一个渐变或图像编辑器，它可以帮助您可视化最终渐变的外观（因为我不知道您希望它看起来像什么），并且可能会生成相应的单个线性渐变你。

不过，从我所见，它看起来像是一个多向渐变。在这种情况下，您要么想要使用分层背景（每层有一个渐变），要么甚至使用实际图像。

Answer 2

只需在@BoltClock 中添加一些可以玩的技巧：

• 正如他在回答中所说的那样，分层背景。它使用多个背景“图像”（渐变）完成。每一个都可以通过以下方式控制：

  background-position: left center, right top;
  background-repeat: repeat, no-repeat;
  

  如果您有 2 个图像/渐变要设置样式。

• 渐变添加到:before和:after伪。您可以根据需要调整这些伪图像的大小和位置（您必须：绝对定位，z-index在主背景和实际内容之间进行一些分层等）。例如，请参阅我以前的答案和小提琴：使用 CSS 显示两个不同的渐变作为背景？

  看来您不能通过content: url() url(), 只有图像（url() 的任何有效值）添加渐变。并且通过添加的内容content无法控制为真实背景（重复，位置），因此即使有效，它也不是最通用的方法。