当前位置: 首页 > 知识库问答 >
问题:

有没有一种方法可以用不同的颜色部分填充文本?[副本]

姚臻
2023-03-14

有没有一种方法可以用W3 web技术(例如SVG、canvas)来实现这一点?

共有1个答案

柯易安
2023-03-14

是的,您可以使用text-fill-colorbackground-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>
 类似资料: