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

krige 发表于 Dev

战争

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

我曾尝试使用以下代码笔 - 两种颜色。

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>

陪伴阿菲

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

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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。