css - 有没有办法用不同的颜色部分填充文本？

Question

这个问题在这里已经有了答案:





Is it possible to apply CSS to half of a character?

(21 个回答)


3年前关闭。




这是我想要实现的目标:


有没有办法用 W3 网络技术来做到这一点，例如SVG， Canvas ？

Answer 1

是的，您可以使用 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>

注意:访问 this link想要查询更多的信息。