此问题已在此处有答案：

Creating the perfect rainbow gradient in CSS（6个回答）
4天前关闭。
这篇文章是编辑并提交审查4天前.
如何在CSS中创建一个双渐变条纹集？类似这样：

.stripe{
background:linear-gradient(
        45deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 21%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );}

<div class = 'stripe'><h1>.</h1></div>

但有一个相反程度的覆盖：

.stripe{
background:linear-gradient(
        -45deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 21%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );}

<div class = 'stripe'><h1>.</h1></div>

如果将它们叠加，则应该是这样的：

.stripe {
  background: repeating-linear-gradient(
      45deg,
    transparent,
    transparent 10px,
        rgba(255, 0, 0, 1) 10px,
        rgba(255, 154, 0, 1) 11px,
        rgba(208, 222, 33, 1) 12px,
        rgba(79, 220, 74, 1) 13px,
        rgba(63, 218, 216, 1) 14px,
        rgba(47, 201, 226, 1) 15px,
        rgba(28, 127, 238, 1) 16px,
        rgba(95, 21, 242, 1) 17px,
        rgba(186, 12, 248, 1) 18px,
        rgba(251, 7, 217, 1) 19px,
        rgba(255, 0, 0, 1) 20px
 
  ),
linear-gradient(
        45deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

<div class = 'stripe'><h1>.</h1></div>

但是这不起作用，因为它会一遍又一遍地重复。我如何让模式继续并在整个酒吧中展开？注意：如果不将度数更改为负数，它看起来是一样的，所以我希望叠加的度数为-45。

编辑：我问的是如何让部分叠加透明！

我正在尝试弄清楚如何制作2个渐变;把它们叠加成条纹状