文本渐变的 CSS 水平交替条纹

Question

我仔细查看了一下，但还没能解决这个问题。

有谁知道如何在不使用任何背景图片的情况下，纯CSS实现某些文本的附加图片效果？

有 2 个像素高的交替水平条纹。 1 个条纹是纯色，另一个是线性渐变。

加分、尊重和接受的答案将给予任何使用不透明度渐变之类的东西并且只使用一种颜色的人，这样您就可以将文本的整个外观从第一张图片更改为第二张图片只需更改一个地方的颜色即可。

Answer 1

可以像下面这样完成:

body {
  background:#000;
  font-family:arial;
}

p{
  font-size: 50px;
  display:inline-block;
  margin:20px;
  font-weight:bold;
  background: 
    linear-gradient(to right,transparent, var(--c,red)),
    repeating-linear-gradient(to bottom, var(--c,red) 0,var(--c,red) 2px,transparent 2px,transparent 4px);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p>
  example
</p>
<p style="--c:blue">
  example
</p>