为啥我的 -webkit-background-clip: text ;不管用

Posted 2023-02-23

【中文标题】为啥我的 -webkit-background-clip: text ;不管用

【英文标题】：Why my -webkit-background-clip: text ; is not working为什么我的 -webkit-background-clip: text ;不管用

【发布时间】：2021-09-06 13:57:33

【问题描述】：

我想为带有渐变的文本制作动画，但我的 -webkit-background-clip:text;不工作，请在这里检查什么问题：

h2
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 10%;
    top: 10%;
    font-size: 150%;
    font-weight: 800;
    color: white;
    width: 10%;
    height: 20%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400%;
    background: linear-gradient( to right bottom, rgba(255,255,255,.9), rgba(255,30,80,1) 130%);
    animation: animate 10s linear infinite;

<div id="myname">
                <h2>Priyanshu Kumar</h2>
            </div>

【问题讨论】：

你不需要它。 background-clip 是 supported almost universally 没有前缀。拿出来就可以了。

不工作的兄弟

为我工作，兄弟codepen.io/selfagency/pen/xxqowma

你需要把背景放在背景剪辑之前

@selfagency chrome 仍然需要 -webkit- （在 chrome 中测试你的代码，它不会工作）

【参考方案1】：

@Temani Af 如果您的回答有效，谢谢。

我将背景放在背景剪辑之前，它对我有用。