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

为身体中的斜条纹添加了不透明度

＆＃13;

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

＆＃13;

背景的多个CSS线性渐变

1 个答案: