gradients for background

I am trying to make the entire background of a page look like the image below with CSS, and I'm having difficulty using multiple linear-gradients together. The background has to have thin diagonal stripes with a top-to-bottom color fade that is lighter in the middle and fades to a darker color at the top and bottom.

I have tried a bunch of things and what I have here looks the best so far, but it's not quite right. Here is a jsfiddle showing what I have.

I am okay with the stripes, but the top-to-bottom gradient is definitely off, as the gradient only shows on the transparent stripes. I think what is needed here, is two gradients that overlap somehow to get the effect below, but perhaps there is a better way.

Here is the code from the fiddle in case the link breaks in the future:

/* 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%
    );
}

Any idea how to go about doing this?

---

增加了身体斜条纹的不透明度

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

链接地址: http://www.djcxy.com/p/89340.html

上一篇: 在背景图像上的渐变

下一篇: 背景的渐变