另一个线性渐变内部的线性渐变 [英] Linear gradient inside another linear gradient

问题描述

我正在尝试在另一个线性渐变中创建一个线性渐变，这可能吗?下面的例子

I'm trying to create a linear gradient within another linear gradient, is it possible ? example below

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

颜色1是

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

颜色2为

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

最终结果应该是这个

推荐答案

您可以将两个渐变组合到 background中:linear-gradient(向右，#f4c05b，#fcd580，#f4c05b 50％，#aa0507 50％，#e0171e，#aa0507)即可获得效果-请注意，在此答案中，左/右两个部分上的渐变都是从左到右.

You can combine the two gradients into background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507) to get the effect - note that the gradients on the both left / right sections are left to right in this answer.

请参见下面的演示

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

这篇关于另一个线性渐变内部的线性渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！