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

【问题标题】：CSS background with multiple gradients and a skewed part具有多个渐变和倾斜部分的 CSS 背景
【发布时间】：2021-03-07 09:36:57
【问题描述】：

我正在尝试根据图片创建蓝色背景：multiple css backgrounds with skewed part

到目前为止，我能够做倾斜渐变部分或渐变本身。

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

你知道如何将它们连接在一起以实现图像上的结果吗？

【问题讨论】：

background: linear-gradient(170deg, transparent 80%, #fff 80%) ,linear-gradient(90deg, #031085 10%, #0F69EF 80%) ?
@TemaniAfif 这行得通，谢谢！如果您将此放入答案中，我会接受。

标签： css background gradient

【解决方案1】：

只需执行以下操作：

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

【讨论】：

【解决方案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>

【讨论】：