更改HTML中对角渐变线的两侧的文本颜色 [英] Changing text color on 2 sides of diagonal gradient line in html

问题描述

关于如何更改渐变线的2部分文字颜色的任何想法？例如在这里，如果我希望文本的蓝色部分（ s， o和 m的一部分）是黑色？

  .button {
背景：线性渐变（140deg，＃00C9FF 35％，透明35％）； 
} 
  

解决方案

您可以将文本包装在< p> 标记中并进行设置

  button {背景：linear-gradient（ 140deg，＃00C9FF 35％，透明35％）；白颜色; font-size：30px;} p {margin：0; font-size：50px;背景：-webkit-linear-gradient（130度，红色65％，黑色15％）； -webkit-background-clip：文本； -webkit-text-fill-color：透明;}  

  < button type = button>< p>一些长文本< / p>< / button>  

Any idea on how to change text color for 2 parts of gradient line? For example here if I want the blue part of the text ('s', 'o' and a part of 'm') to be black?

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

解决方案

You can do it wrapping the text in a <p> tag and setting a linear-gradient to this tag.

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;
}

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

这篇关于更改HTML中对角渐变线的两侧的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！