在html中改变对角线渐变线两侧的文字颜色

Question

如何更改2段渐变线的文字颜色？例如，如果我想要文本的蓝色部分（'s'，'o'和'm'的一部分）是黑色的？

.button{
   background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
}

Answer 1

您可以将文本包装在<p>标记中并将linear-gradient设置为此标记。

＆＃13;

＆＃13;

button{
   background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
   color: white;
   font-size: 30px;
}

p{
  margin: 0;
  font-size: 50px;
  background: -webkit-linear-gradient(130deg, red 65%, black 15%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

＆＃13;

<button type="button"><p>some long text</p></button>

＆＃13;

＆＃13;

＆＃13;