css - CSS水平交替条纹与文本上的渐变

Question

我已经仔细看了一遍，但我还没能解决这个问题。

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

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

加分、尊重和接受的答案将交给任何使用不透明度渐变和仅一种颜色的人，这样您就可以将文本的整个外观从第一张图像更改为第二张图像，只需通过在一处更改颜色。

标签： css

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>