background-image 的替代解决方案是什么：repeating-linear-gradient

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 .8 billion.[12]</div>

没问题，只是想知道有什么方法可以让div没有文字的区域变透明（把照片圈里黑色的区域变透明） ).

我能想到的另一个解决方案是 split 基于换行符的文本，并使用 for 循环为不同的行分配不同的颜色，但这太乱了。

我认为 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 .8 billion.[12]</div>

background-image 的替代解决方案是什么：repeating-linear-gradient

What will be an alternative solution for background-image: repeating-linear-gradient

html

css

background