背景的渐变

我正在尝试使页面的整个背景看起来像下面的图像，并且我很难一起使用多个线性渐变。 背景必须具有较薄的斜条纹，从上到下的颜色淡化在中间较淡，并在顶部和底部淡化成较暗的颜色。

我已经尝试了一堆东西，而我在这里看到的最好，但它不太对。 这里是一个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%
    );
}

任何想法如何去做这件事？

---

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

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/89339.html

上一篇: gradients for background

下一篇: How to fill part of the background with gradient color?