在 html 中更改对角渐变线两侧的文本颜色
Changing text color on 2 sides of diagonal gradient line in html
知道如何更改渐变线两部分的文本颜色吗?例如,如果我想让文本的蓝色部分('s'、'o' 和 'm' 的一部分)变成黑色?
.button{
background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
}
您可以将文本包装在 <p>
标签中,并为此标签设置 linear-gradient
。
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>
知道如何更改渐变线两部分的文本颜色吗?例如,如果我想让文本的蓝色部分('s'、'o' 和 'm' 的一部分)变成黑色?
.button{
background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);
}
您可以将文本包装在 <p>
标签中,并为此标签设置 linear-gradient
。
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>