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

要将渐变叠加层添加到文本元素,我们需要为要设置样式的文本设置三个不同的CSS属性: background-image: <gradient> background-clip: text text-fill-color: transparent 步骤1:将渐变添加为背景 在此示例中,我们将使用线性渐 WP网站建设

要将渐变叠加层添加到文本元素,我们需要为要设置样式的文本设置三个不同的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-colortransparent。它将删除文本中的填充,使渐变再次可见。

步骤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. 创建不同的文本叠加层,而不必重复剪切属性

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/12010

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code