[英]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%)
color 1 is颜色 1 是
background: linear-gradient(#aa0507,#e0171e,#aa0507);
color 2 is颜色 2 是
background: linear-gradient(#f4c05b,#fcd580,#f4c05b);
the end result should be this最终结果应该是这样
Simply adjust the background-position
/ background-size
using multiple background.只需使用多个背景调整
background-position
/ background-size
。 Basically each gradient will be half width and full height.基本上每个渐变都是半宽和全高。
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; }
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.您可以将两个渐变组合到
background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507)
以获得效果 - 请注意两者的渐变在这个答案中,左/右部分是从左到右的。
See demo below:请参阅下面的演示:
body { background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.