另一个线性梯度内的线性梯度

Question

我想另一个线性渐变中创建的线性渐变，这可能吗？下面的例子

background: linear-gradient(to right, #color1 50%, #color2 0%)

颜色1是

background: linear-gradient(#aa0507,#e0171e,#aa0507);

色彩2是

background: linear-gradient(#f4c05b,#fcd580,#f4c05b);

最终的结果应该是这样的

Answer 1

您可以将两个梯度组合成background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507)得到的效果 - 注意，两个左/右部分的梯度左至右在这个答案。

请参见下面的演示：

body {
  background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507);
}

Answer 2

简单地使用多个背景调整background-position / background-size。基本上每个梯度将有一半的宽度和满高度。

body {
  margin:0;
  height:100vh;
  background: 
   linear-gradient(#aa0507,#e0171e,#aa0507) right/50% 100%,
   linear-gradient(#f4c05b,#fcd580,#f4c05b) left /52% 100%; /*we can make this a little bigger to avoid the blank space*/
  background-repeat:no-repeat;
}