如何使用 CSS 为文本添加渐变叠加

最初发布于fossheim.io。

要向文本元素添加渐变叠加，我们需要为想要设置样式的文本设置三个不同的 CSS 属性：

background-image: <gradient>
background-clip: text
text-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;
}

另请注意，并非所有渐变都受同等支持。例如，在某些浏览器中，圆锥渐变 (conic-gradient) 不会显示。在这种情况下，也可以添加线性渐变 (linear-gradient) 作为圆锥渐变 (conic-gradient) 的后备方案。

.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;
}

这使您可以轻松地做两件事：

为文本和常规元素的背景添加相同的渐变或图案
创建不同的文本叠加，无需重复剪辑属性

文章来源：https://dev.to/fossheim/how-to-add-a-gradient-overlay-to-text-with-css-2f99

如何使用 CSS 为文本添加渐变叠加

如何使用 CSS 为文本添加渐变叠加

步骤 1：添加渐变作为背景

步骤 2：将背景剪切到文本

步骤 3：添加备用方案

更多示例

额外：可扩展性