如何多次获得线性渐变对角线效果？答案

【问题标题】：How to get the Linear Gradient diagonal effect multiple times?如何多次获得线性渐变对角线效果？
【发布时间】：2019-02-13 17:05:59
【问题描述】：

下图，有一条透明的对角线。效果如何。

我已尝试使用以下 codepen - 用于两种颜色。

https://codepen.io/PositionRelativ/pen/Ichrg

但是如何获取多次呢？

* {
  box-sizing: border-box
}

body {
  margin: 0;
  padding: 0;
  color: white;
  font-family: sans-serif;
  font-size: 160%;
}

div {
  padding: 4% 10%;
}

header,
footer {
  background-color: #002848;
  min-height: 40px;
}

.one {
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
  min-height: 500px;
}

.two {
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(150deg, #34ADFF 35%, #4CBFFF 35%);
  min-height: 400px;
}

.three {
  background-color: #EFEEEF;
  min-height: 260px;
}

.four {
  background-color: #E0E0E0;
  min-height: 260px;
}

.five {
  background-color: #EFEEEF;
  min-height: 260px;
}

.six {
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(30deg, #34ADFF 45%, #4CBFFF 45%);
  min-height: 400px;
}

.seven {
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(150deg, #013A6B 35%, #004E95 35%);
  min-height: 200px;
}

<header></header>

<div class="one"></div>

<div class="two"></div>

<div class="three"></div>

<div class="four"></div>

<div class="five"></div>

<div class="six"></div>

<div class="seven"></div>

<footer></footer>

【问题讨论】：

我无权发布图片。我添加了空格。
你不需要多个<div>s，只需使用多个背景

标签： html css css-gradients

【解决方案1】：

您可以考虑以下多个背景：

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to top left, transparent 49.8%,rgba(0,0,0,0.3) 50%),
    linear-gradient(to top right,transparent 49.8%,rgba(0,0,0,0.3) 50%),
    url(https://picsum.photos/1000/800?image=1069);
  background-size:
    50% 100%,
    50% 100%,
    cover;
}

【讨论】：