要将渐变叠加层添加到文本元素，我们需要为要设置样式的文本设置三个不同的css属性：
background-image: <gradient>background-clip: texttext-fill-color: transparent步骤1：将渐变添加为背景在此示例中，我们将使用线性渐变，可以通过以下方式绘制：
.gradient-text {
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
为了使渐变覆盖文本字段的整个宽度和高度，请设置background-size: 100%，这是我在本示例中所做的。
步骤2：将背景剪切到文本此时，我们在背景中有渐变，并且文本显示在其顶部。
我们接下来要做的是设置background-clip: text。这只会在有文字的地方渲染背景。如果您对此进行测试，则看来您的渐变似乎已完全消失，这是因为文本也仍被渲染，并且渐变层隐藏在下面。
因此，我们必须将设置text-fill-color为transparent。它将删除文本中的填充，使渐变再次可见。
步骤3：添加后备广告并非所有浏览器都支持将渐变作为背景图像剪切在文本顶部的功能，因此添加后备功能很重要。我们也可以通过向background-color文本添加属性来实现。
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
还请记住，并非所有梯度都得到同等支持。例如，在某些浏览器中，不会显示圆锥渐变。在这些情况下，还可以将线性梯度作为回退添加到圆锥形梯度。
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(#f3ec78, #af4261);
background-image: conic-gradient(#f3ec78, #af4261);
}
在此示例中，文本将具有圆锥渐变作为覆盖。如果这不起作用，它将显示线性渐变。在也不支持线性渐变的浏览器中，文本将改为显示为背景色。
这也意味着，如果您想为文本添加实际的背景，则需要为文本添加包装。
<h1 style=background-color: black;>
<span class=gradient-text>this text will have a gradient on top</span>
</h1>
更多例子
额外：可扩展性如果（文本）渐变是品牌推广的重要组成部分，则可以将此功能分为两部分：一个将渐变呈现为常规背景图像的类，以及一个用于将任何背景裁剪到文本上的类。
渐变：
.gradient-brand-primary {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
文字剪裁：
.gradient-text {
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
这使您可以轻松地做两件事：
为文本添加相同的渐变或图案，并为常规元素添加背景创建不同的文本叠加层，而不必重复剪切属性