如何用CSS为按钮文字添加渐变且不影响按钮背景？

你的代码里存在属性冲突导致文字渐变失效：

• 主元素同时设置了background-color: #fff和background: linear-gradient(...)，后者作为简写属性会覆盖前者，且主元素不需要设置背景色——伪元素已经承担了白色背景的作用，重复设置会干扰文字渐变的裁剪逻辑。
• color: transparent属于冗余设置，-webkit-text-fill-color: transparent已经能实现文字透明以显示背景渐变的效果。

修正后的CSS代码：

&.bricks-background-light {
    position: relative;
    display: inline-block;
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;

    font-size: inherit;
    background: linear-gradient(90deg, #E8125C, #375D9F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
}

&.bricks-background-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    z-index: -1;
}

修改说明：

• 移除主元素的background-color: #fff和color: transparent，让主元素专注处理文字渐变效果。
• 去掉伪元素z-index的!important，主元素的z-index:1已经足够让伪元素处于下层，不会干扰文字显示。

修改后按钮将显示白色背景，文字呈现预期的渐变效果。

内容的提问来源于stack exchange，提问作者JiaCheng Zhang