什么是背景图像的替代解决方案:重复线性梯度

Question

我试图使用background-image: repeating-linear-gradient为每一行指定不同的颜色。

​

div {
  --spac: 2em;
  line-height: var(--spac);
  color: white;
  background-image: repeating-linear-gradient(red 0 var(--spac), green var(--spac) calc(var(--spac) * 2));
}

<div>Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a
  wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate,
  on 2 June 2021 for $1.8 billion.[12]</div>

​

它工作的很好，但我只是想知道是否有任何方法，我可以使div区域，没有文本变得透明(使在照片圈中的区域与黑色成为透明)。

​

​

我可以想到的另一种解决方案是使用split循环为不同的行分配不同的颜色，但是这太麻烦了。

我认为对于background-image: repeating-linear-gradient，不会有一些简单的解决方案，因为background-image: repeating-linear-gradient根据元素的宽度而不是文本来分配背景色。(如果有，请纠正我，告诉我！)

解决这一问题的替代解决方案是什么？

Answer 1

如果你准备好了一些黑客，这里有一个。诀窍是要有一个覆盖该区域的白色：

​

.box {
  --spac: 2em;
  line-height: var(--spac);
  color: white;
  background-image: repeating-linear-gradient(red 0 var(--spac), green var(--spac) calc(var(--spac) * 2));
  overflow:hidden;
}
.box:after {
  content:"";
  display:inline-block;
  vertical-align:top;
  clip-path:inset(0 -100vmax -100vmax 0);
  box-shadow:0 0 0 100vmax #fff;
}

<div class="box">Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a
  wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate,
  on 2 June 2021 for $1.8 billion.[12]</div>

​