如何用CSS实现叠加式条纹渐变效果

你不需要用repeating-linear-gradient，直接叠加两个普通的linear-gradient就能实现需求——底层放45°的完整渐变，上层放-45°的同色系渐变并设置部分透明度，这样两个渐变叠加后自然会形成交叉的条纹/混合色彩效果，而且会自动铺满整个元素。

完整代码示例 #

.stripe {
  width: 100%;
  height: 300px; /* 给元素设置高度才能看到完整效果 */
  background: 
    /* 上层：-45°渐变，设置透明度（这里用0.5，可自行调整） */
    linear-gradient(
      -45deg,
      rgba(255, 0, 0, 0.5) 0%,
      rgba(255, 154, 0, 0.5) 10%,
      rgba(208, 222, 33, 0.5) 21%,
      rgba(79, 220, 74, 0.5) 30%,
      rgba(63, 218, 216, 0.5) 40%,
      rgba(47, 201, 226, 0.5) 50%,
      rgba(28, 127, 238, 0.5) 60%,
      rgba(95, 21, 242, 0.5) 70%,
      rgba(186, 12, 248, 0.5) 80%,
      rgba(251, 7, 217, 0.5) 90%,
      rgba(255, 0, 0, 0.5) 100%
    ),
    /* 底层：45°的完整不透明渐变 */
    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>

关键说明 #

• 两个渐变用逗号分隔写在background属性里，顺序是上层在前，底层在后。
• 调整上层渐变的rgba最后一个参数（透明度，范围0-1），就能控制叠加的深浅程度：值越小，底层渐变越明显；值越大，上层渐变的色彩越突出。
• 之前用repeating-linear-gradient导致图案重复，是因为它的逻辑是按指定间距重复片段，而我们要的是覆盖整个元素的完整渐变叠加，所以用普通linear-gradient就足够。

内容的提问来源于stack exchange，提问作者henxdl