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>