更改HTML中对角渐变线的两侧的文本颜色 [英] Changing text color on 2 sides of diagonal gradient line in html
本文介绍了更改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屋!
查看全文