背景的多个 CSS 线性渐变

Question

我正在尝试使用 CSS 使页面的整个背景看起来像下面的图片，但我在同时使用多个线性渐变时遇到了困难。背景必须有细斜条纹，从上到下颜色渐变，中间较浅，顶部和底部颜色较深。

我已经尝试了很多东西，我在这里的东西看起来是迄今为止最好的，但它并不完全正确。这是一个jsfiddle 显示我所拥有的。

我对条纹没问题，但是从上到下的渐变肯定是关闭的，因为渐变只显示在透明条纹上。我认为这里需要的是两个渐变以某种方式重叠以获得下面的效果，但也许有更好的方法。

这是小提琴中的代码，以防将来链接中断：

/* Stripes */
body {
    background: linear-gradient(
            -45deg,
            #5BABCF 25%,
            transparent 25%,
            transparent 50%,
            #5BABCF 50%,
            #5BABCF 75%,
            transparent 75%,
            transparent
    );
    background-size: 6px 6px;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* Color Fade */
html {
    background: repeating-linear-gradient(
            to bottom,
            #051219,
            #91B7CA 25%,
            transparent 50%,
            #91B7CA 75%,
            #051219 100%
    );
}

知道怎么做吗？

Answer 1

为正文中的对角线添加了不透明度

body {
    background: linear-gradient(
            -45deg,
            #5BABCF 25%,
            transparent 25%,
            transparent 50%,
            #5BABCF 50%,
            #5BABCF 75%,
            transparent 75%,
            transparent
    );
    background-size: 6px 6px;
    height: 100vh;
    margin: 0;
    padding: 0;
    opacity: 0.2;
}

/* Color Fade */
html {
    background: repeating-linear-gradient(
            to bottom,
            #051219,
            #91B7CA 25%,
            transparent 50%,
            #91B7CA 75%,
            #051219 100%
    );
}