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>

​