Is there a way to partially fill text with different colours?

2018-06-07 19:19:30

This question already has an answer here:

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

yes you can, using text-fill-color and background-clip

check this for more details and examples : https://css-tricks.com/how-to-do-knockout-text/

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>

链接地址: http://www.djcxy.com/p/23786.html

上一篇: 文本在html5中突出显示

下一篇: 有没有办法用不同的颜色部分填充文本？