div上有两个线性渐变层

Question

我有一个彩色的矩形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);

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

达到效果：

预期效果：

如何添加多个自身重叠的渐变？

Answer 1

我不相信你可以将两个渐变层叠在一起，就像它们都是纯色一样。

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

您的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>