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

前端之家收集整理的这篇文章主要介绍了在html中改变对角线渐变线两侧的文字颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有关如何更改2个渐变线的文本颜色的任何想法?例如,如果我想要文本的蓝色部分(‘s’,’o’和’m’的一部分)是黑色的?
.button{
   background: linear-gradient(140deg,#00C9FF 35%,transparent 35%);
}

解决方法

您可以将文本包装在< p>中.标记并为此标记设置线性渐变.
button{
   background: linear-gradient(140deg,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;
}
<button type="button"><p>some long text</p></button>

猜你在找的HTML相关文章