CSS渐变文字失效如何修复？文字始终显示黑色

你的渐变文字不生效，核心原因是缺少文字透明化设置：

当使用-webkit-background-clip: text将背景裁剪到文字区域时，文字默认的黑色会覆盖渐变背景，导致渐变无法显示。必须把文字颜色设为透明，才能让下方的渐变背景透出来。

修复后的CSS代码 #

.head{
    margin-top: 12rem;
    text-align: center;
    background: -webkit-linear-gradient(280deg, #27c1c3, #dd2dd5);
    -webkit-background-clip: text;
    /* 添加该行，让文字透明以显示渐变 */
    -webkit-text-fill-color: transparent;
    /* 如需兼容非webkit内核浏览器，可补充：color: transparent; */
}

完整代码示例 #

HTML部分：

<h1 class="head">Hallo</h1>

修改后渐变文字即可正常显示。

内容的提问来源于stack exchange，提问作者Linggar Pratama