具有多个渐变和倾斜部分的CSS背景

Question

我正试图根据图片创建蓝色背景：多个带有倾斜部分的css背景

到目前为止，我可以做倾斜梯度部分或梯度本身。

background: linear-gradient(170deg, #031085 80%, #fff 80%); // skew
background: linear-gradient(90deg, #031085 10%, #0F69EF 80%); // linear

你知道如何将这些连接在一起以达到图像上的效果吗？

Answer 1

只需执行以下操作：

html {
height:100%;
background: 
linear-gradient(170deg, transparent 80%, #fff 80%),
linear-gradient(90deg, #031085 10%, #0F69EF 80%)
}

Answer 2

css上没有多重渐变背景。如果你愿意，你可以在后台添加多个选项例如：

background: 
linear-gradient(
rgba(255, 0, 0, 0.45), 
rgba(255, 0, 0, 0.45)
),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

有关更多详细信息，您可以查看此来源：https://css-tricks.com/css-basics-using-multiple-backgrounds/

或

你可以添加两个堆叠的div标签，你可以为它们分配单独的背景

<div class="background1"></div>
<div class="background2"></div>