div 上的两个线性渐变层

我有一个彩色矩形 div，在其上放置 45 度的线性渐变以实现类似斑马的效果。我想将第二个渐变分层，角度为 135 度（与前一个渐变正交）。

height: 30px;
background-color: rgb(255, 0, 0);
background-image: 
 repeating-linear-gradient(45deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px), 
 repeating-linear-gradient(135deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 20px);

主要颜色是红色，第一个条纹是绿色，最后一个条纹是蓝色。但是我看不到最后的蓝色条纹。

达到的效果：

预期效果：

如何添加多个相互重叠的渐变？

我不相信如果两个渐变都是纯色的话，你可以像这样将它们叠加在一起。

但是，您可以使用一些透明度和一些创造性思维来获得您想要的效果。

Your background-color，已经是红色，因此将第一个渐变中所有对红色的引用替换为transparent。现在您已经获得了绿色透明的条纹图案。透明条纹显示为红色，因为那是背景颜色。

然后为第二个渐变做一个类似的颜色透明条纹图案：蓝色和透明。

这最终使我们的图案与您想要的方式相反，因此最后一步是交换两个渐变，因此蓝色条纹位于绿色条纹之上。

div {
  height: 30px;
  background-color: rgb(255, 0, 0);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 14px), repeating-linear-gradient(45deg, transparent, transparent 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px);
}

<div class="one"></div>

@vals 指出，您还可以在红绿条纹图案之上使用蓝色条纹的透明度。因此，在您的原始代码中，在红蓝条纹图案中，您可以将红色引用替换为transparent。然后，与第一个选项一样，您将翻转渐变的顺序，因此蓝色透明图案位于第一个。

通过这种方法，整体模式将不再依赖于background-color，所以这更像是一个后备。

div {
  height: 30px;
  background-color: rgb(255, 0, 0);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 14px), repeating-linear-gradient(45deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px);
}

<div></div>