有没有一种方法可以用不同颜色部分填充文本？

Question

有没有一种方法可以用不同颜色部分填充文本？

csssvgcanvas

14

我要实现的目标如下所示：

有没有一种使用W3 web技术（例如SVG、Canvas）来实现这个目标的方法？

- Matt Deacalion

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Taki · Accepted Answer

是的，您可以通过使用text-fill-color和background-clip属性来实现。

html, body {
  background: #000;
}

p {
  margin: 0px;
}

#clip {
  background: linear-gradient(to right, rgba(127, 127, 127, 1) 23%, rgba(234, 85, 7, 1) 20%, rgba(234, 85, 7, 1) 57%, rgba(127, 127, 127, 1) 59%);
  background-attachment: fixed;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 8vw;
  font-weight: bold;
  text-align: center;
}

<p id="clip">Lorem ipsum dolor sit </p>

注意：请访问此链接获取更多信息。