css - 渐变背景上的条纹

Question

我想要渐变背景上的条纹。有关条纹图案，请参见下图。我的渐变背景如下：

 background-image: linear-gradient(90deg, hsla(209, 33%, 82%, 1), rgb(240,240,240), hsla(37, 33%, 85%, 1));

如果你观察图像的底部，你会发现没有条纹，而且有更多的渐变。条纹应仅位于背景的上方部分。

标签： css

Answer 1

在 div 上设置渐变

在伪上设置条纹

在这个伪上设置一个掩码，从不透明变为透明

.test {
  background-image: linear-gradient(90deg, hsla(209, 33%, 82%, 1), rgb(240,240,240), hsla(37, 33%, 85%, 1));
  width: 100%;
  height: 400px;
  position: relative;
}

.test:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0) 10%, transparent 80%);
            mask-image: linear-gradient(rgba(0, 0, 0, 1.0) 10%, transparent 80%);
    background-image: repeating-linear-gradient(45deg, white 0px, white 10px, lightblue 10px, lightblue 20px);
}

<div class="test"></div>