试图控制渐变文本[重复]答案

【问题标题】：Trying to control gradient text [duplicate]试图控制渐变文本[重复]
【发布时间】：2021-05-22 05:41:49
【问题描述】：

所以我试图让我网站中的一些文本与背景颜色相同。我已经考虑了两种方法来做到这一点，要么让文本在那个特定的位置（比如 div 中的切口）有一些 JS 的背景颜色 - 我不知道该怎么做（和网上没找到）。或者，我可以让它渐变并控制渐变的开始位置。

这是我的代码：

.catchphrase {
    font-family: Niconne; 
    font-size: 3.5vw;
    font-weight: 400;
    background: -webkit-linear-gradient(0deg, #1761A0 74%, #6D37B0 26%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<div id="catch_div">
    <asp:Label ID="Label1" runat="server" Text="Label" CssClass="catchphrase">Feel the rythem</asp:Label>
</div>

这就是它产生的结果，当我添加 %values 时，渐变消失了：

有人有什么想法吗？（如果有办法使文本与背景颜色相同，我也很乐意听到）

【问题讨论】：

标签： html css

【解决方案1】：

你需要输入：“display:inline-block”

.catchphrase{
    font-family: Niconne; 
    font-size: 3.5vw;
    font-weight: 400;
    background: -webkit-linear-gradient(0deg, #1761A0 74%, #6D37B0 26%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display:inline-block;
}

【讨论】：

嗨，不幸的是我没用：/
您尝试删除浏览器缓存？
刚刚试了...同样的结果

【解决方案2】：

.catchphrase{
    font-family: Niconne; 
    font-size: 5vw;
    font-weight: 400;
    background: #75CF55;
    background: -webkit-linear-gradient(to right, #75CF55 0%, #CF1BC9 41%);
    background: -moz-linear-gradient(to right, #75CF55 0%, #CF1BC9 41%);
    background: linear-gradient(to right, #75CF55 0%, #CF1BC9 41%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<div id="catch_div">
    <asp:Label ID="Label1" runat="server" Text="Label" class="catchphrase">Feel the rythem</asp:Label>
</div>

【讨论】：

谢谢老兄！只需要稍微调整颜色