在一个显示器中组合多个线性渐变

Question

我想将三个线性渐变组合到一个图像背景中，如下所示：three gradients，但还没有找到这样做的好方法。

当我尝试对多个元素使用线性渐变 css 属性时，我无法在我的 css 中提供除实体元素以外的任何内容。例如，这会导致只出现一个渐变：

.bg-grad {
    background: rgb(255, 255, 255);

    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(192, 204, 92, 1) 100%
        ),
        linear-gradient(
            180deg,
            rgba(120, 196, 212, 1) 0%,
            rgba(255, 255, 255, 1) 100%
        );
}

<div class="bg-grad" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 

</div>

如有任何帮助，我们将不胜感激！

Answer 1

使用三个渐变作为背景图片并使用background-size & background-position.

body {
  background-image: 
  linear-gradient( 0deg, rgba(255, 255, 255, 1) 0%, rgba(192, 204, 92, 1) 100%), 
  linear-gradient( 180deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 100%), 
  linear-gradient( 0deg, rgba(120, 196, 212, 1) 0%, rgba(255, 255, 255, 1) 100%);
  background-repeat: no-repeat;
  height: 100vh;
  background-size: 33.333%;
  background-position: left, center, right;
}

Answer 2

您需要指定一些东西才能使线性渐变像 'stripes' 一样工作，否则第一个优先的会重复并覆盖其他的。

您的条纹看起来好像从一种颜色到另一种颜色是连续的（第二种颜色是白色），因此无需指定起始值。但是，如果您将起始值设置为 100%，则将显示该颜色的 none。

此代码段在其他两个之间放置了一条白色条纹，使其看起来更像问题中的图像。

.bg-grad {

    background-image:
        linear-gradient(rgba(255, 255, 255, 1),rgba(192, 204, 92, 1)),
        linear-gradient(white, white),
        linear-gradient(rgba(120, 196, 212, 1), rgba(255, 255, 255, 1));
   background-size: 33.33% 100%;
   background-position: 0 0, 33vw 0, 66vw 0;
   background-repeat: no-repeat no-repeat;
   height: auto;
   width: 100%;
}

<div class="bg-grad" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 

</div>

在一个显示器中组合多个线性渐变

Combining multiple linear gradients in one display

html

css

background-image

linear-gradients