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

Question

我的状态很好，但还无法解决。

有没有人知道如何纯粹在CSS中而不使用任何背景图像来实现对某些文本的附加图像的效果？

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

使用不透明渐变和仅一种颜色的操作者，可以加分，表示敬意和接受的答案，以便您可以将文本的整体外观从第一张图像更改为第二张图像只需在一个地方更改颜色即可。

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>