网站建设之如何使用CSS向文本添加渐变叠加

要将渐变叠加层添加到文本元素，我们需要为要设置样式的文本设置三个不同的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;
}

还请记住，并非所有梯度都得到同等支持。例如，在某些浏览器中，不会显示圆锥渐变。在这些情况下，还可以将线性梯度作为回退添加到圆锥形梯度。

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

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

1. 为文本添加相同的渐变或图案，并为常规元素添加背景
2. 创建不同的文本叠加层，而不必重复剪切属性